Subtiele achtergrond-effecten
Onderaan het scherm zie je een aantal stippen, die langzaam verschijnen en verdwijnen, een poosje wegblijven en dan weer
terugkomen. Het kleurverschil en het contrastverschil zijn klein. Dat geeft een subtiel effect.
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 op lijkt.
- De code bestaat uit HTML en CSS (in de file styles.css). JavaScript wordt niet gebruikt.
- De werking van het script
- Elke stip staat in een <div>-tag. Die wordt met CSS geanimeerd met behulp van
@keyframes.
- HTML
- Elke stip staat in een <div>-tag met de klasse stip een een tweede klasse stip1, stip2, stip3, enz.
- De <div>-tags moeten leeg blijven, ze bevatten geen content.
- Deze <div>-tags staan bij voorkeur net na de <body>-tag of net voor de </body>-tag.
- CSS
- De CSS-klasse stip definieert de positionering (fixed) en de grootte van de stippen (cirkels met diameter van 20 pixels), alsmede de kleur van de stippen (#ccc, lichtgrijs).
- De opacity is op 0 gezet, waardoor de stippen niet zichtbaar zijn bij het laden van de pagina. De animatie zorgt ervoor dat de stippen zichtbaar worden en verdwijnen.
- Daarnaast worden een paar instellingen gemaakt voor de animatie met @keyframes. De name is st1. De
richting is alternate. Dat wil zeggen dat de animatie eerste 'heen' gaat en daarna 'terug'. Het aantal keren dat de
animatie wordt uitgevoerd is infinite, dat wil zeggen dat de animatie oneindig doorgaat.
- De klassen stip1, stop2, … definiëren de plaats van de stippen op het scherm, in termen van left en bottom. Dit gebeurt in procenten, waardoor de stippen niet buiten beeld kunnen vallen.
- Deze klassen leggen ook de vertraging (delay) en de duur (duration) van de animatie vast voor elke stip apart.
- De @keyframes definiëren de verandering van opacity, van 0 naar 0.5.
- 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 stippen. Als je een Licjhte achtergrond hebt, maak je die iets donkerder. of omgekeerd.
- Verander desgewenst de grootte van de stippen.
- Zet de stippen op de plaats die voor jouw document het beste uitkomt. Houd left tussen 15% en 85%, bottom tussen 10% en 35%.
- Maak de bovengrens van de opacity niet hoger dan 0.5. Daarboven maken de stippen de tekst minder goed leesbaar.
- Tenslotte …
- Zorg er voor dat de stippen in het onderste deel van het scherm blijven. Hoger dan 35% van de window-hoogte moet je niet gaan, daar boven wordt het al gauw irritant.
- Zorg ook dat er weinig kleur- en helderheidsverschil is tussen de stippen en de achtergrond, anders leiden de stippen te veel af.
- De beweging moet traag zijn, want ook 'knipperlichten' maken het beeld onrustig.
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>).
<link rel="stylesheet" href="styles.css">
(Zet dit in de <BODY>, bij voorkeur helemaal aan het begin of helemaal aan het einde).
<div class="stip stip1"></div>
<div class="stip stip2"></div>
<div class="stip stip3"></div>
<div class="stip stip4"></div>
Downloaden:
Druk op de knop:
File: voorb738.zip, 745 bytes.
