Tip voor zelfbouwers: Hoe maak ik een tekst-animatie zonder plugin? - Klokwerk-Design
Zet dit in je pagina-template (of in Gutenberg in een codeblock, of in de classic editor in je text-editor):
<div class="foto">
<img src="https://klokwerk-design.nl/wp-content/uploads/2019/10/brick_texture133-1-1.jpg">
<h1 class="tekst1″>Een simpele tekst-animatie</h1>
<h1 class="tekst2″>Met Klokwerk-Design!</h1>
Voor de image gebruik je de url naar je eigen plaatje uiteraard, en de tekst in tekst1 en tekst2 kan je vervangen door jouw teksten. Je kan er ook meer toevoegen op dezelfde manier.
In je child-theme of custom css in je thema zet je vervolgens dit:
.foto h1 {
animation-name: animatie;
.tekst1 {
@keyframes animatie {
10% { color: #884400; }
40% { color: #884400; }
Je kan bij de .foto h1 nu de afstand tot de top veranderen (bij top:), en de duur van de animatie. Bij de keyframes kan je de kleur van de letter en de kleur van de schaduw invullen die je wilt hebben.
Wanneer je meer dan twee teksten gebruikt moeten er wat waarden veranderen.
Animation-delay van tekst 2 is de animation-duration gedeeld door het aantal teksten. Dus heb je vier teksten dan is de delay van tekst 2 in dit geval 10 seconden gedeeld door vier is 2.5s (dat is natuurlijk een beetje snel maar je hebt het idee).
Heb je een tekst 3 dan wordt de animation-delay 2x de animation-duration gedeeld door het aantal teksten etc. Dus heb je vier teksten in het bovenstaande geval dan gebruik je hier 2x 2.5s = 5s.
De animatie hier stopt bij 50% omdat er twee teksten komen. Komen er drie teksten dan moet de animatie stoppen bij 33.33%, bij vier teksten bij 25%, etc.
De font-size staat hier in vw, wat staat voor viewport-width. Ik vind dat altijd een heel fijne manier om maat aan te geven want daarmee kan je precies aangeven hoe breed het font is ten aanzien van de breedte van de browser, dus dan kan je heel 'grafisch' werken.