Bewegende en verdwijnende tekstkoppen
Discipline vraagt:
betrokkenheid
volharding
toewijding
training
ambitie
opleiding
Hierboven zie je een tekst die je tegen zou kunnen komen in een presentatie over het opvoeden van medewerkers in een bedrijf.
Er zouden hier ook reclame-kreten in kunnen staan, voor de promotie van een product.
Op deze pagina wordt uitgelegd hoe je zoiets kunt aanpakken.
Dit is een bewerking van een script uit Webdesigner Magazine nr. 91 (oktober 2016), pag. 18 e.v. Dit
blad wordt sinds eind november 2017 niet meer gemaakt.
De auteur is is niet bij het artikel genoemd.
Voor deze website heb ik een paar kleine aanpassingen gedaan. De code van het voorbeeld kun je downloaden om zelf te gebruiken.
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in je eigen site.
- De werking van het script
- De code bestaat uit HTML (in de body van het document) en CSS (in de file styles.css). Er komt geen JavaScript bij kijken.
- Het is belangrijk dat de HTML-structuur gehandhaafd blijft, anders werkt het niet goed meer.
- HTML
- De HTML-code bestaat uit een enkele <h3>-tag met de klasse zin. Daarbinnen bevindt zich een <span>-tag waar de tekst in staat. In het voorbeeld is er een <br>-tag bij gezet, om de opmaak mooi te krijgen.
- Daar naast is er binnen de <h3>-tag een <div>-tag met de klasse woorden. Daarin staan
de bewegende en verdwijnende woorden, elk in een <span>-tag.
- CSS
- De CSS begint met het instellen van de hoogte van h3 op 5em. Daarin staan de tekst en de bewegende woorden.
- De woorden bewegen met behulp van keyframes. De animatie heet animateWords; de caode staat in dit voorbeeld aan het einde van het CSS-bestand. De woorden worden bewogen van boven (top: 0) naar beneden (top: 5em), waarbij de ondoorzichtigheid (opacity) verloopt van 1 naar 0; de doorzichtigheid gaat dus van 0% naar 100%.
- De elementen met klasse woorden, dat zijn de woorden zelf, worden naast elkaar gehouden door display: inline.
- Elk woord staat binnen een <span>-tag en wordt apart geanimeerd. Dat wordt geregeld met animation. Een beweging duurt 5 seconden, gebruikt ease-in-out en wordt oneindig (infinite) herhaald.
- De woorden beginnen niet tegelijkertijd. Er zit steeds 3 sec. tussen het starten van de achtereenvolgende woorden. Een
en ander wordt geregeld door nth-child(). Daarbij worden ook de kleuren
van de woorden ingesteld.
De oplettende lezer ziet al snel in dat, doordat de animatie 5 seconden duurt en de tijd tussen het starten van de afzonderlijke bewegingen constant is, het eerste en het zesde woord altijd gelijk lopen.
- Toepassen in je eigen site
- Download de .zip file en pak hem uit. Neem de code op in je document, zoals hieronder is aangegeven.
- Het effect hoeft niet helemaal bovenin het document te staan, het kan ook ergens anders.
- Pas de zin en de woorden aan zoals je zelf wilt. Als je de <br> uit de eerste <span> verwijdert, komt alles op één regel.
- Als je meer woorden gebruikt, moet je in de CSS voor elk extra woord een blok toevoegen:
.woorden span:nth-child(X) {
animation-delay: SSs;
color: #RRGGBB;
} - Als je minder woorden gebruikt moet je in de CSS de overeenkomstige blokken
.woorden span:nth-child(X)verwijderen. - Voor deze toepassing mag de nummering in de aanroep van nth-child() geen gaten bevatten.
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 rel="stylesheet" href="styles.css">
(Zet dit in de <BODY> op de plaats waar het effect moet verschijnen).
<h3 class="zin">
<span>Discipline vraagt:<br></span>
<div class="woorden">
<span>betrokkenheid </span>
<span>volharding </span>
<span>toewijding </span>
<span>training </span>
<span>ambitie </span>
<span>opleiding</span>
</div>
</h3>
Downloaden:
Druk op de knop:
File: voorb546.zip, 802 bytes.
Opmerking:
Pas op met te veel beweging op je webpagina. Het beeld wordt al snel onrustig en dat jaagt bezoekers weg.
