Ben's Hobbyhoekje -- Tekst animeren met CSS-sprites

Tekst animeren met CSS-sprites

Hieronder zie je het woord REVEAL. Dat verdwijnt steeds een beetje en komt daarna weer terug.
Op deze pagina wordt uitgelegd hoe je dit maakt. De code kun je downloaden om zelf te gebruiken.

Dit is een bewerking van code die ik aantrof in Webdesigner Magazine 93, (februari 2017) pag. 72 en 73. Dit blad wordt sinds eind november 2017 niet meer gemaakt.
De auteur is niet bij het oorspronkelijke artikel genoemd. De code is niet meer beschikbaar op internet.

Voor deze site heb ik de code geschikt gemaakt voor toepassing zoals op deze pagina (in het origineel beslaat het effect een volledig window).

Er worden twee items besproken:
1. De werking van het script.
2. Inbouwen in je eigen site.
De werking van het script
De code bestaat uit CSS en HTML (beide in het document) en een plaatje.
Het plaatje bevat (in dit geval) 19 versies van het woord REVEAL. Het begint met het volledige woord en gaat dan in negen stappen naar de 'minst zichtbare' toestand, om daarna weer in negen stappen naar het volledige woord te gaan. Dit zijn dus 19 versies van het zelfde woord.
Een dergelijke opeenvolging van plaatjes wordt "sprite" genoemd. Zie de file sprite.png.
Het woord REVEAL is 300px breed. De 19 opeenvolgende plaatjes staan naast elkaar; dat maakt een figuur van 19 × 300 = 5700px breed.
Op het scherm is alleen de eerste 300px van sprite.png zichtbaar. De CSS verschuift de inhoud in 2 seconden van 0 naar -5700px (naar links dus) en doet dat in 19 stappen. Door de snelle opeenvolging van de plaatjes lijkt het vloeiend te verlopen.
HTML
De HTML bestaat uit twee geneste <div>-tags, met klasse container resp. reveal.
De klasse container dient alleen om het effect in het document te positioneren.
De klasse reveal bevat het woord. De afmetingen worden bepaald door de inhoud van de sprite.
CSS
Voor de container is gekozen voor een breedte van 100% bij een hoogte van 100px (= 60px van de sprite + 2 × 20px van de padding).
De achtergrond is transparant, waardoor de afmetingen niet opvallen.
De breedte van het zichtbare deel van de sprite, in de klasse reveal, is 300px, zoals hiervoor al is genoemd. De hoogte is 60px (gelijk aan de hoogte van het plaatje).
Het plaatje zelf is de achtergrond van het element <div class=""reveal;>.
De animatie verloopt via keyframes. In 19 stappen wordt de sprite over 5700px naar links geschoven. Dat duurt 2 seconden en gaat oneindig door.
Inbouwen in je eigen site
Maak een sprite. Dat kan al met gewone grafische software. Gespecialiseerde software (ook gratis) is te vinden op internet.
Download de .zip-file en pak hem uit.
Zet de code in je document zoals op deze pagina is beschreven.

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>
.container {
background: transparent;
margin: 0;
padding: 20px 0;
width: 100%;
height: 60px;
}
.reveal {
margin: 0 auto;
width: 300px;
height: 60px;
background-image: url("sprite.png");
animation: play 2.0s steps(19) infinite;
}
@keyframes play {
from { background-position: 0px; }
to { background-position: -5700px; }
}
</style>

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

<div class="container">
<div class="reveal"></div>
</div>

Downloaden:

Druk op de knop: File: voorb558.zip, 6970 bytes.