In- en uitzoomende achtergrond
Een krachtig middel om de aandacht van je site-bezoek te trekken is door de achtergrond langzaam in te laten zoomen en
weer uit te laten zoomen. Dit geldt vooral voor sites waar je een product wilt presenteren.
Op deze pagina wordt een manier getoond om dit voor elkaar te krijgen. we beginnen met een voorbeeld:
Dit is een bewerking van een script dat ik aantrof in Webdesigner Magazine nr. 92 (december 2016), pag. 22 e.v.
Het blad Webdesigner Magazine wordt sinds eind november 2017 niet meer gemaakt.
Het oorspronkelijke script is niet meer beschikbaar op internet. De maker van het script is niet bij het betreffende artikel genoemd.
Voor deze website is de code wat vereenvoudigd.
- Er worden twee items besproken:
- De werking van het script.
- Zelf een site mee bouwen.
- De werking van het script
- De code van het voorbeeld is gemaakt met HTML en CSS. JavaScript wordt niet gebruikt.
- De HTML is een enkele <main>-tag, die de hele <body> van het document bedekt.
- Binnen de <main> bevindt zich alle content van het document. Je kunt daar alle geldige HTML gebruiken.
- Ook de CSS is eenvoudig. Het begint met een eenvoudige reset van de body.
- Daarna volgt het opmaken van main. Dat gaat twee delen. Eerst worden de plaats en de grootte zo ingesteld dat de
hele body wordt bedekt. Daarna wordt de achtergrondfoto in main gezet en wordt de animatie ervan ingesteld.
Het is mogelijk om de achtergrond in het <body>-element te zetten, maar dat levert problemen op met overflow. De achtergrond gaat dan mee bewegen met de verticale scrollbalk. - De animatie van de achtergrond wordt gedaan met @keyframes, die de naam animateBackground heeft.
- De animatie-cyclus duurt 60 seconden en loopt oneindig door.
- De achtergrond begint op ware grootte (in het voorbeeld: 4000 × 3000 pixels), geschaald naar de kleinste afmeting
van het window. Vervolgens zoomt de achtergrond in, tot 200%. Dat gebeurt in 30 seconden (= 50%, de helft van de animatie-cyclus),
volgens het schema ease-in-out, zie ook het item Bezier-krommen
gebruiken in CSS-animaties.
- De andere elementen in het document zijn apart opgemaakt, buiten <main> om.
- Het effect is het beste zichtbaar in een groot window.
- Zelf een site mee bouwen
- Download de zip-file en pak hem uit. Bouw de code op zoals hieronder wordt getoond.
- Regel een achtergrondfoto. Neem er een die groter is dan de meeste beeldschermen, bijvoorbeeld 4000 × 3000 pixels als in het voorbeeld. Als de foto te klein is, wordt die onscherp door het vergroten tijdens de animatie.
- Pagina's met dit effect moeten niet te veel content bevatten. Zorg voor grote, duidelijk leesbare letters waarvan de kleur goed contrasteert met de bewegende achtergrond.
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" media="screen" href="styles.css">
(Zet dit in de <BODY>).
<main>
<h1>Welkom in<br><b>De Vlindertuin</b></h1>
</main>
Downloaden:
Druk op de knop:
File: voorb549.zip, 742 bytes.
