Subtiele achtergrond-effecten III
Onderaan het scherm zie je iets dat op een golf lijkt. Het beweegt langzaam. Het kleurverschil en het contrastverschil
zijn klein. Dat geeft een subtiel effect.
Op deze pagina wordt uitgelegd hoe je zoiets maakt. De code kun je downloaden om zelf te gebruiken.
- Er worden twee items besproken:
- De werking van het script.
- 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 een beetje op lijkt.
- De code bestaat uit HTML en CSS. JavaScript wordt niet gebruikt.
- De werking van het script
- De golvende lijn bestaat uit een figuur die door CSS heen- en weer wordt bewogen.
- HTML
- De HTML bestaat uit één <div>-tag met de klasse golf. Deze staat bij voorkeur bovenin
of helemaal aan het eind van de <body>.
- CSS
- De klasse golf is in het voorbeeld gepositioneerd op 70px van de onderkant van het window.
- De achtergrond van de klasse golf is een figuur. In het voorbeeld is het golf.png, met afmetingen (b ×
h) 1033 × 50px. In de praktijk blijkt dat het nodig is om de golf heel breed te maken, in elk geval minimaal de halve
breedte van het window waarin de golf te zien is.
Om horizontale schuifbalken te voorkomen is overflow-x:hidden gebruikt. golf wordt achter de tekst gehouden door z-index:-1. - golf is dubbel zo breed als het window (200%) en even hoog als de figuur. In dit geval is dat 50px.
- De animatie (met naam wave) schuift golf van left:-100% naar left:0. Dat duurt 30 seconden en gaat daarna terug van left:0 naar left:-100%. Dit loopt oneindig door. De beweging is constant (linear). De animatie start 1 seconde nadat de pagina is geladen.
- Doordat golf bij het laden van de pagina is gepositioneerd op left:0 en de animatie begint op left:-100%,
begint de beweging met een sprongetje.
- 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.
- Maak je eigen golf. Maak de hoogte van golf gelijk aan de hoogte van je eigen figuur. De figuur moet breed zijn, zie eerder in dit verhaal.
- Pas zonodig de duur van de animatie aan.
- Tenslotte …
- De golf heeft drie tinten grijs: de voorgrond en een iets lichtere resp. iets donkerder tint grijs op de achtergrond. Het effect wordt pas echt subtiel als die kleuren maar weinig verschillen van de kleur van de achtergrond. Op deze pagina zouden het dus drie tinten blauw-paars moeten zijn.
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>
.golf {
position:fixed;
bottom:70px; left:0;
width:200%; height:50px;
background:url('../images/golf.png') left center;
overflow-x:hidden;
animation-name:wave;
animation-delay:1s;
animation-duration:30s;
animation-timing-function:linear;
animation-direction:alternate;
animation-iteration-count:infinite;
z-index:-1;
}
@keyframes wave {
from {left:-100%;}
to {left:0;}
}
</style>
(Zet dit in de <BODY> bij voorkeur aan het begin of helemaal aan het eind)
<div class="golf"></div>
Downloaden:
Druk op de knop:
File: voorb761.zip, 7853 bytes.
Opmerking:
Het item Subtiele achtergrond-effecten IV bespreekt een variant op dit script, waarbij
de drie golven onafhankelijk van elkaar bewegen.
