Knipperende tekst met verschillende kleuren

De bedoeling van deze pagina is zonder toelichting wel duidelijk. Op deze pagina wordt beschreven hoe je zoiets maakt. De code van het voorbeeld kun je downloaden om zelf te gebruiken.

B|e|n|'|s| |H|o|b|b|y|h|o|e|k|j|e

Deze 'banner' is bij uitstek geschikt om de aandacht van je bezoekers te trekken. Dat werkt zeker als je van die knallende kleuren gebruikt zoals op deze pagina.

Dit is een bewerking van een script dat ik aantrof in het blad Webdesigner Magazine nr. 98 (september 2017), pagina 14 t.m. 16. Voor deze site is de opmaak van het voorbeeld verfraaid.
Webdesigner Magazine wordt sinds eind november 2017 niet meer gemaakt.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• De werking van het script
• De code bestaat uit HTML, CSS en JavaScript, in het voorbeeld staan die alle in het document.
• HTML
• De HTML voor het effect is één enkele <h2>-tag met de klasse words. Dit is de container voor de tekst die wordt geanimeerd. Het is echter niet noodzakelijk om een <h2> te gebruiken, elke andere tag waar je gewone tekst in kwijt kan is geschikt. Denk aan <p>, <a>, <h1> tot en met <h7>, <div> en <span>. Het gaat om de klasse words.
• De content van de <h2>-tag met de klasse words is een reeks karakters. die gescheiden worden door vertical bars. De vertical bars worden door het JavaScript gebruikt om de afzonderlijke karakters elk in een <span>-tag te zetten. Deze <span>-tags worden gebruikt in de animatie door CSS.
• Je kunt in plaats van de verticale streep ook een ander karakter gebruiken om de letters te scheiden. Dan moet je dat ook in het JavaScript aanpassen.
   
• CSS
• Als eerste wordt de container h2 opgemaakt. In het voorbeeld is deze gecentreerd in de regel gezet. Alle onderliggende elementen staan in vette tekst die 2em groot is.
• De klasse words hoeft niet apart te worden opgemaakt. De span-elementen die door het JavaScript zijn gemaakt hebben wel wat extra' s nodig. Als eerste worden ze onzichtbaar gemaakt door de opacity op 0 te zetten.
• De span-elementen worden binnen de container gehouden en in de goede volgorde gehouden door position:relative te gebruiken. Hier wordt ook de animatie ingesteld. Die wordt gerealiseerd met @keyframes.
• In het voorbeeld zijn er 17 karakters. Dat betekent dat er 17 <span>-elementen zijn.
• Voor de animatie is de tekst verdeeld in vijf groepen die elke een eigen kleur hebben. Dat wordt bereikt door de selectoren .words span:nth-child(5n), .words span:nth-child(5n-1), …, .words span:nth-child(5n-4).
  Er ontstaat hiermee vijf identieke animaties die met tussenpozen van 1 seconde worden opgestart. Dat wordt bereikt door de animatie-delay achtereenvolgens op 0, 1, 2, 3, en 4 seconden te zetten. Door deze aanpak is de tekst elke vijf seconden gedurende één seconde in zijn geheel in beeld.
  In elk van de groepen .words span:nth-child(5n-x)is een eigen kleur gedefinieerd.
• In het voorbeeld zijn er 17 karakters en 5 kleuren. Dat betekent dat er + 2 × 4 karakters met dezelfde kleur zijn en die gelijk met elkaar verschijnen en verdwijnen (de spatie tussen Ben's en Hobbyhoekje heeft de fuchsiakleur!).
• Voor een beter begrip van de manier waarop de groepen zijn gemaakt:
  • Met de selector .words span:nth-child(5n) wordt elk vijfde element gekozen. Dat zijn de volgnummers 5, 10 en 15, ofwel de letters s, b en k. De kleur is groen (#0d0).
  • Met de selector .words span:nth-child(5n-1) wordt elk vijfde element gekozen, min één. Dat zijn de volgnummers 4, 9 en 14, ofwel de letters [apostrof], b en e. De kleur is geel (#dd0).
  • Met de selector .words span:nth-child(5n-2) wordt elk vijfde element gekozen, min twee. Dat zijn de volgnummers 3, 8 en 13, ofwel de letters n, 0 en o. De kleur is rood (#d00).
  • Met de selector .words span:nth-child(5n-3) wordt elk vijfde element gekozen, min drie. Dat zijn de volgnummers 2, 7 12, en 17, ofwel de letters e, H, h en e. De kleur is cyaan (#0dd).
  • Met de selector .words span:nth-child(5n-4) wordt elk vijfde element gekozen, min vier. Dat zijn de volgnummers 1, 6 11, en 16, ofwel de letters B, [spatie], y en j. De kleur is fuchsia (#d0Sd).
   
• De @keyframes voor de animatie heeft de naam animateWords en loopt oneindig door. Elke cyclus duurt 10 seconden. De overgang van de ene naar de andere toestand gaat vloeiend met ease-in-out.
• De letters worden in 3½ seconde zichtbaar gemaakt, blijven 3 seconden staan en worden dan weer in 3½ seconde onzichtbaar gemaakt.
   
• JavaScript
• Het JavaScript wordt gestart als de pagina is geladen. Dat gebeurt door een event-handler die met addEventHandler() aan de <body> is gekoppeld en die reageert op load.
• Het JavaScript maakt een lijst (de array nodes) van alle elementen die de klasse words hebben. Dat gaat met querySelectorAll().
• Van elk element van nodes wordt de innerText gesplitst in een array, words. Elk element bevat de karakters die tussen de vertical bars staan.
  N.B.: in het voorbeeld staat elk karakter van de tekst apart tussen vertical bars, maar dat hoeft niet. Je kunt meerdere karakters tussen de verticale strepen zetten.
• De losse karakters worden vervolgens elk in een <span>-tag gezet. De hele reeks wordt in de variabele html gezet, die vervolgens de innerHTML van de tag met klasse words vervangt.
• Als je in de HTML de verticale streep hebt vervangen door wat anders, moet je dat ook veranderen in de regel
  var words = nodes[i].innerText.split("|");.
   
• Toepassen in je eigen site
• Download de .zip-file en pak hem uit. Bouw de code op in je document zoals hieronder is aangegeven. Je hebt nu een werkend voorbeeld.
• Pas de tekst in de <h2>-tag aan aan je eigen behoefte. Wijzigen eventueel het karakter dat de letters scheidt. Vergeet daarbij ook het JAvaScript niet.
• Pas de kleuren in de CSS aan.
• Als je een andere tag gebruikt dan <h2> als container voor de geanimeerde tekst, moet je op twee plaatsen in de CSS de selector h2 veranderen.
• Het is mogelijk om groepen toe te voegen of te verwijderen.
• Een groep toevoegen:
  •  Verander in de selector .words span:nth-child(5n-x) de 5n in 6n.
  •  Voeg een selector toe .words span:nth-child(6n-5). Kies een geschikte kleur.
  •  Verander de lengte van de animatie-cyclus van (in het voorbeeld) 10 seconden naar bijv. 12 seconden.
• Een groep verwijderen:
  •  Verander in de selector .words span:nth-child(5n-x) de 5n in 4n.
  •  Verwijde de selector .words span:nth-child(5n-4). Kies een geschikte kleur.
  •  Verander de lengte van de animatie-cyclus van (in het voorbeeld) 10 seconden naar bijv. 8 seconden.

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<style>
h2 {
  text-align: center;
}
h2 > * {
  font-size:2em;
  font-weight: bold;
}
.words span{
  position: relative;
  opacity: 0;
  animation: animateWords 10s ease-in-out infinite;
}
.words span:nth-child(5n) {
  animation-delay: 0s;
  color: #0d0;
}
.words span:nth-child(5n-1) {
  animation-delay: 1s;
  color: #dd0;
}
.words span:nth-child(5n-3) {
  animation-delay: 2s;
  color: #d00;
}
.words span:nth-child(5n-2) {
  animation-delay: 3s;
  color: #0dd;
}
.words span:nth-child(5n-4) {
  animation-delay: 4s;
  color: #d0d;
}
@keyframes animateWords {
    0% { opacity: 0 }
  35% { opacity: 1 }
  65% { opacity: 1 }
  100% { opacity: 0 }
}
</style>
<script>
window.addEventListener("load", function(){
  var nodes = document.querySelectorAll(".words");
  for(var i=0; i<nodes.length; i++){
    var words = nodes[i].innerText.split("|");
    var html = "";
    for(var i2=0; i2<words.length; i2++){
      html += "<span>"+words[i2]+"</span>"
    }
    nodes[i].innerHTML = html;
  }
});
</script>

(Zet dit in de <BODY> op de plaats waar het effect moet verschijnen).

<h2 class="words">B|e|n|'|s| |H|o|b|b|y|h|o|e|k|j|e</h2>

Downloaden:
 
Druk op de knop:  File: voorb581.zip, 704 bytes.