Ben's Hobbyhoekje -- Subtiele achtergrond-effecten V

Subtiele achtergrond-effecten V

Op de achtergrond van deze pagina is —heel subtiel— wat beweging te zien.
Op deze pagina wordt uitgelegd hoe je zoiets maakt. De code kun je downloaden om zelf te gebruiken.

Er worden twee items besproken:
1. De werking van het script.
2. Toepassen in je eigen site.
Inspiratie voor dit item is ontstaan door de rubriek "Dagelijkse Gebedsinspiratie" in de Bible-app van YouVersion voor Android. Voor deze pagina heb ik iets nagebouwd wat er op lijkt.
De code bestaat uit HTML en CSS. JavaScript wordt niet gebruikt.
De werking van het script
De beweging wordt gemaakt door een cirkel omhoog en omlaag te bewegen. De diameter is groter dan de breedte van het document. Tijdens de beweging verandert de diameter van de cirkel.
HTML
De HTML-code bestaat uit één enkele <div>-tag met de klasse circle.
Deze <div>-tag kan overal in het document staan, maar bij voorkeur helemaal aan het begin of aan het einde van de <body>. Dat is goed voor de leesbaarheid van de HTML-code.
CSS
De CSS van het voorbeeld bestaat uit één klasse, circle, vergezeld door een @keyframes-blok.
De positie van circle is fixed, op 80% van de hoogte van het document in de browser, en op 50% van de breedte van het document naar links verschoven. Dat laatste is nodig omdat de cirkel 2 × zo breed is als het document (200%). Hierdoor staat de cirkel toch netjes in het midden.
De hoogte van de cirkel is de hoogte van het document in de browser (feitelijk is het een ellips).
De cirkel is gemaakt als een rechthoek met 50% afgeronde hoeken. Dit is gedaan om de hoogte van de cirkel te kunnen veranderen in de animatie.
De kleur van de cirkel is #eaeffc. Dit verschilt maar weinig van de achtergrondkleur van het document #e4e9f6. Met Hexadecimale kleurcodes is dat lastig in te stellen, maar dat is op te lossen. Zie verderop in dit verhaal.
De animatie (omhoogkomen of omlaag zakken van de cirkel) duurt 30 seconden, en begint zodra de pagina is geladen.
De animatie loopt via @keyframes met naam rondje. Deze laat de cirkel omhoog komen door top te veranderen van 80% naar 20%. De hoogte van de "cirkel" wordt daarbij verlaagd van 400% naar 200%. Daardoor verandert de kromming van het zichtbare deel van de cirkel.
Door in circle de eigenschap animation-direction:alternate; op te nemen wordt de animatie, zodra die gestopt is, herhaald, maar dan de andere kant op. Dit gaat oneindig door via animation-iteration-count:infinite.
Het effect wordt op de achtergrond gehouden door z-index:-1.
Toepassen in je eigen site
Download de .zip-file en pak hem uit. Bouw de code op zoals hieronder is aangegeven. Je hebt nu een werkend voorbeeld.
Verander de kleur van de cirkel. Maak de kleur van de cirkel een haartje lichter of donkerder dan de achtergrond. Dat gaat het beste door de kleur van de cirkel en de achtergrond in CSS met de functie hsl() in te stellen. Zet de waarde van de saturatie één tot 3 procent hoger of lager te zetten. Op deze pagina is hsl(223,7,96) gebruikt voor de achtergrond en hsl(223,7,99) voor de cirkel. (Met hexadecimale kleurcodes is de aanpassing een stuk lastiger: #e4e9f6 voor de achtergrond en #eaeffc voor de cirkel).
Je kunt wat experimenteren met top en height in de CSS. De op deze pagina gebruikte waarden lijken optimaal te zijn. Houd de waarden van top resp. height binnen de blokken .circle en @keyframes gelijk aan elkaar.
Je kunt ook de animation-duration verlagen. Daardoor gaat de beweging sneller. Maar zie ook de opmerking hieronder.
Tenslotte...
Zorg ervoor dat de beweging echt langzaam gaat, het gaat al gauw te snel. Snelle beweging verstoort de leesbaarheid.

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>
.circle {
position:fixed;
top:80%; left:-50%;
width:200%; height:400%;
border-radius:50%;
background-color:#eaeffc;
z-index:-1;
animation-name:rondje;
animation-duration:30s;
animation-delay:0;
animation-timing-function:ease;
animation-direction:alternate;
animation-iteration-count:infinite;
}

@keyframes rondje {
from {top:80%; height:400% }
to {top:20%; height:200% }
}
</style>

(Zet dit in de <BODY> bij voorkeur aan het begin of helemaal aan het eind)

<div class="circle"></div>

Downloaden:

Druk op de knop: File: voorb765.zip, 472 bytes.

Opmerking:

Hexadecimale kleurcodes en de function hsl() worden besproken in het item Kleurcodes voor tekst, links en achtergrond