Ben's Hobbyhoekje -- Statisch object met dynamische animatie

Statisch object met dynamische animatie

Hieronder zie je vier woorden. Het zouden knoppen kunnen zijn, maar het zijn statische objecten.
De objecten hebben allemaal iets dat beweegt. Dat is de rand rond het object. Elk object heeft een andere rand. Die is geanimeerd.

Het is mooi weer

Op deze pagina wordt uitgelegd hoe je zoiets maakt. De code van het voorbeeld kun je downloaden om zelf te gebruiken.

Inspiratie voor dit item is ontstaan door een artikel in Webdesigner Magazine 95 (mei 2017), pag. 18 t.m. 20. Dit blad wordt sinds eind november 2017 niet meer gemaakt.
Voor deze site heb ik het voorbeeld verfraaid.

Er worden twee items besproken:
1. De werking van het script.
2. Toepassen in je eigen site.
De werking van het script
De code bestaat uit HTML en CSS. Er komt geen JavaScript bij kijken.
HTML
De HTML van het voorbeeld bestaat uit één -tag, met daarin voor elk woord een -tag.
Deze span-tags hebben alle vier de klassen animation en big. Daarnaast heeft elke span-tag één van de klassen A, B, C en D.
De content van elke span-tag zijn de vier woorden.
CSS
De klasse big zorgt voor de grote letters en de kleur van de letters. Ook wordt hier de onderlinge afstand tussen de woorden geregeld.
De klasse animation verzorgt de animatie. Daarbij wordt gebruik gemaakt van de pseudo-klasse :before. Dit omdat er een aantal dingen moet worden ingesteld vóór er aan de animatie kan worden begonnen.
Merk op dat de breedte van de border niet wordt ingesteld, dat wordt gedaan door de keyframes in de animatie.
Binnen de klasse animation is een viertal aparte klassen gemaakt, voor elk woord een. Deze vier klassen, A, B, C en D, veranderen elk iets aan de stijl van de border (soort en afrondingsstraal) en verbinden ze met de animatie genaamd ping.
De animatie verandert de breedte van de border in 5 seconden van 10px naar 30px. Daarbij worden de randen 100% ondoorzichtig naar 100% transparant.
Let vooral op het gedrag van de dashed rand bij "mooi".
Toepassen in je eigen site.
Download de .zip-file en pak hem uit.
Bouw de code van je eigen document op zoals hieronder wordt getoond.
Pas de HTML aan. Gebruik dit met mate, bijvoorbeeld slechts ´´n soort rand, en weinig woorden.
Pas de CSS aan. Je kunt bijna alles veranderen. Laat .animation en .animation:before ongewijzigd. Binnen .animation:before kun je wel border en animation aanpassen.
Voor een 'productie-site' zouden m.i. alle geanimeerde elementen dezelfde randen moeten hebben. Met name dashed randen ogen onrustig. Wees voorzichtig met de toepassing ervan.

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>
.big{
font-size: 5em;
margin: 5px;
color: #008080;
}
.animation{
display: inline-block;
position: relative;
}
.animation:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: solid #09c;
box-sizing: border-box;
animation: 5s infinite;
}
.animation.A:before{
animation-name: ping;
}
.animation.B:before{
animation-name: ping;
border-radius: 50%;
}
.animation.C:before{
animation-name: ping;
border-style: dashed;
}
.animation.D:before{
animation-name: ping;
border-style: double;
}
@keyframes ping {
0% {border-width: 10px; opacity: 1;}
100% {border-width: 30px; opacity: 0;}
}
</style>

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

Het
is
mooi
weer

Downloaden:

Druk op de knop: File: voorb567.zip, 578 bytes.