Vaak grijpen mensen erg snel naar plugins als ze een functie in WordPress willen toevoegen. In veel gevallen is dat heel goed, maar vaak ook is het niet nodig, en maakt het je site onnodig zwaar. Bijvoorbeeld bij het toevoegen van effecten: dit kan tegenwoordig meestal heel simpel, zonder gebruik van javascript.
Als voorbeeld hier een tekst-slider over een stilstaande foto. Volg de stappen stap voor stap op, en je ziet dat het werkt! Als je vervolgens goed kijkt naar de css zal je zien dat je het makkelijk kunt aanpassen naar jouw smaak.
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>
</div>
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 {
width: 100%;
position: relative;
}
.foto img {
width: 100%;
height: auto;
position: relative;
z-index: 0;
}
.foto h1 {
position: absolute;
width: 90%;
padding: 0;
margin: 0 5%;
text-align: center;
top: 10vw;
font-size: 2vw;
text-transform: uppercase;
color: transparent;
animation-name: animatie;
animation-duration: 10s;
animation-iteration-count: infinite;
z-index: 10;
}
.tekst1 {
animation-delay: 0;
}
.tekst2 {
animation-delay: 5s;
}
@keyframes animatie {
0% { color: transparent; }
10% { color: #884400; }
40% { color: #884400; }
50% { color: transparent; }
}
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.
Weer een plugin uitgespaard!
