Wiebelende koppen

Hieronder zie je een tekstkopje dat nogal wiebelig is. Zo'n kop staat leuk op een vrolijke, informele website, zeker als je ook nog een grappig font gebruikt.
Op deze bladzijde staat aangegeven hoe je zoiets kunt maken voor je eigen website.

Nieuw Evenement!

Dit effect heb ik voor het eerst gezien op een site voor basisschool-leerlingen, waar ze van alles konden doen in het kader van een nationaal onderwijs-project. Die site is bij mijn weten al lang weer verdwenen, maar het effect is te leuk om te worden vergeten. Voor deze website heb ik de code wat toegankelijker gemaakt, waardoor die eenvoudiger is toe te passen in een website.
De code kun je downloaden om zelf te gebruiken.

Er worden twee items besproken:
1. De werking van het script, in algemene termen.
2. Inbouwen in je eigen site.
De werking van het script
Voor de tekst is een <h1>-tag gebruikt. Deze heeft de klasse titel. De tekst binnen deze tag wordt geanimeerd.
De bijzondere letters zijn gemaakt met een Google font, te weten "Shojumaru". De letters zijn 40px hoog.
Het effect is gemaakt met behulp van het GreenSock Animation Platform. Voor deze pagina is de 'module' TweenMax ingezet. Dat is een verzameling routines en plug-ins waarmee je zo'n beetje alles wat je met HTML5 op je beeldscherm kunt tonen, kunt laten bewegen.
De code staat uit HTML, JavaScript en een beetjes CSS. De HTML en de CSS moet je aanpassen voor je eigen gebruik. Als je de snelheid van de beweging wilt veranderen, moet je het JavaScript aanpassen.
De wiebelende kop staat in een <h1>-tag. Dat is hier een handige aanpak, maar in de praktijk kun je er elk block-element voor gebruiken.
De <h1>-tag heeft de klasse titel. Die bevat de tekst die geanimeerd wordt. Je maakt de tekst op met CSS. Spaties in de tekst maak je met Non-breaking spaces ( ).
Direct na de <h1>-tag staan twee regels JavaScript, waarmee achtereenvolgens de functies splitsTekst() en wiebelTekst() worden uitgevoerd.
- spitsTekst() zet de inhoud van de <h1>-tag in de array chars, één letter per array-element, met daarbij een paar CSS-eigenschappen.
- wiebelTekst() zorgt ervoor dat de letters in array chars gaan bewegen.
Voor elk element in chars wordt een <span>-tag gemaakt, met daarin een inline-style waarmee de stand van de betreffende letter wordt bepaald. Dit gebeurt in een eindeloze lus.
Dit is een elegante methode om de kop te laten bewegen, maar er kleeft een nadeel aan: Als je <span>-tags die niet in de animatie horen opmaakt met CSS, ontstaan conflicten waardoor de animatie niet meer werkt. Je kunt het vermijden door alle andere <span>-tags in je document een eigen klasse mee te geven.
De function wiebelTekst() gebruikt twee functies uit de hiervoor genoemde TweenMax-module voor de animatie, te weten het object TimelineMax (in de variabele tijdlijn)). De parameter repeat:-1 zorgt voor de eindeloze herhaling. yoyo:true zorgt dat de tijlijn van het begin naar het einde worden doorlopen, dan van het einde naar het begin, dan weer van het begin naar het einde, enzovoort.
TweenMax is een pakket dat heel veel kan, maar daardoor wel zwaar is. Op het moment dat dit geschreven wordt (augustus 2017) is het ca. 144 kB. Je betrekt het het beste van een CDN, zoals op deze pagina ook is gedaan.
Inbouwen in je eigen site
De code van het voorbeeld staat onderaan de pagina. Je vindt hem ook in de download file.
Voor je eigen site pas je de tekst in de <h1>-tag aan. Het JavaScript in de <body> moet je ongemoeid laten.
Om de opmaak van de titel te veranderen pas je de CSS van de klasse titel aan. Hierbij wordt opgemerkt:
— text-decoration:underline werkt niet.
— Voor een leuk lettertype moet je niet vertrouwen op de standaard-lettertypen. Gebruik een leuk lettertype van Google-fonts of gebruik een webfont dat je zelf uploadt naar je server.
— Let op de eerder genoemde beperking van het <span>-element.
Om de snelheid van de beweging te veranderen moet je de tweede parameter van de aanroep van tijdlijn.staggerTo() aanpassen. Die staat nu op 0.5. Een lager getal geeft een hogere snelheid.
De beleving van de snelheid hangt af van het lettertype en de grootte ervan.
Als je de grootte van de bewegingen wilt wijzigen kun je het beste wat spelen met de getallen in de code van cycle. Kijk maar eens wat er gebeurt als je:

x: function() { return Math.random()*4 - 2; }, y: function() { return Math.random()*4 - 2; }, rotation: function() { return Math.random()*10 - 5; }

verandert in:

x: function() { return Math.random()*10 - 5; }, y: function() { return Math.random()*10 - 5; }, rotation: function() { return Math.random()*20 - 10; }
Voor de betekenis van de overige parameters verwijs ik naar de documentatie op de site van GreenSock.

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>).

<link href="https://fonts.googleapis.com/css?family=Shojumaru"
rel="stylesheet">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.1/TweenMax.min.js">
</script>

<style>
.titel { /*Dit is nodig voor het effect*/
font-family: 'Shojumaru', cursive;
color: navy;
font-size: 40px;
font-weight: normal;
text-align:center;
}
</style>

<script>
var chars = [];
// 1. Splits de tekst van de kop met class 'títel'
function splitsTekst() {
var titel = document.querySelector('.titel');
var splitText = titel.textContent.split('');

// Sla de lijst met losse letters op in de array chars
titel.textContent = '';
var karakter;
for(var i=0, len = splitText.length; i<len; i++) {
karakter = document.createElement('span');
karakter.textContent = splitText[i];
karakter.style.display = 'inline-block';

chars.push(karakter);
titel.appendChild(karakter);
}
}

// 2. Maak de tijdlijn voor het wiebel-effect.
// De tijdlijn wordt afgespeeld totdat de pagina wordt verlaten
// Willekeurige standen van de letters worden in een object gezet
// Gebruik 'cycle' om elke letter in een random stand te zetten
function wiebelTekst() {
var tijdlijn = new TimelineMax({repeat:-1, yoyo:true});
for(var j=0; j < 10; j++) {
tijdlijn.staggerTo(chars, 0.5, {
cycle: {
x: function() { return Math.random()*4 - 2; },
y: function() { return Math.random()*4 - 2; },
rotation: function() { return Math.random()*10 - 5; }
},
ease: Linear.easeNone
}, 0);
}
}
</script>

(Zet dit in de <BODY>, op de plaats waar de wiebelende kop moet verschijnen).

<h1 class="titel">Nieuw Evenement!</h1>
<script>
splitsTekst(); // Splits de tekst in losse letters
wiebelTekst(); // Laat de tekst wiebelen
</script>

Downloaden:

Druk op de knop: File: voorb005.zip, 1085 bytes.

Opmerking:

Ook hier geldt: Wees voorzichtig met de toepassing. Te veel beweging maakt het beeld onrustig. Daardoor zullen de bezoekers eerder geneigd zijn weg te gaan.