Subtiele achtergrond-effecten IV
Onderaan het scherm zie je iets dat op (drie) golven lijkt. Ze bewegen langzaam, met verschillende snelheden. 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.
Dit is een variant van het item Subtiele achtergrond-effecten III, waar de golven alledrie gelijk bewegen.
- 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 op lijkt.
- De code bestaat uit HTML en CSS. JavaScript wordt niet gebruikt.
- De werking van het script
- De golvende lijnen worden gevormd door drie aparte figuren die door CSS heen- en weer worden bewogen.
- HTML
- De HTML bestaat uit drie <div>-tags, voor elke golf één. Elke <div> heeft de klasse golf.
- golf bevat de CSS die de drie golven gemeenschappelijk hebben. Per golf is een een tweede klasse waarin de voor die golf specifieke eigenschappen staan: (golf1, golf2, golf3).
- De <div>-tags staan 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 afmetingen zijn (b × h) 200% x 70px. De breedte is nodig voor de beweging. De hoogte is nodig voor de figuren met de golven. Om horizontale schuifbalken te voorkomen is overflow-x:hidden gebruikt.
- De animatie (met naam wave) schuift de golven van left:-100% naar left:0. Dat duurt 30, 25, resp. 20
seconden (golf1, golf2, golf3) en gaat daarna terug van left:0 naar left:-100%. Dit loopt
oneindig door. De beweging is constant (linear).
De animatie start 1, 3 resp. 5 seconden nadat de pagina is geladen. - Doordat de golven bij het laden van de pagina zijn gepositioneerd op left:0 en de animatie begint op left:-100%,
begint de beweging van elke golf met een sprongetje.
- De drie figuren die de golven vormen worden opgestapeld met behulp van z-index, waarden -1, -2 en -3.
- 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 golven. Maak de hoogte van golf gelijk aan de hoogte van je eigen figuren, die allemaal even hoog moeten zijn. De figuren moeten breed zijn, zie eerder in dit verhaal. De figuren hoeven niet allemaal even breed te zijn.
- Pas zonodig de duur en de wachttijd (delay) van de animaties aan.
- Tenslotte …
- De golven heeft drie tinten grijs: de voorgrond en twee lichtere tinten 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:70px;
overflow-x:hidden;
animation-name:wave;
animation-timing-function:linear;
animation-direction:alternate;
animation-iteration-count:infinite;
}
.golf1 {
background:url('golf1.png') left center;
animation-duration:30s;
animation-delay:1s;
z-index:-1;
}
.golf2 {
background:url('golf2.png') left center;
animation-duration:25s;
animation-delay:3s;
z-index:-2;
}
.golf3 {
background:url('golf3.png') left center;
animation-duration:20s;
animation-delay:5s;
z-index:-3;
}
@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 golf1"></div>
<div class="golf golf2"></div>
<div class="golf golf3"></div>
Downloaden:
Druk op de knop:
File: voorb763.zip, 7685 bytes.
