Afbeeldingseffect tijdens scrollen
Op deze pagina behandel ik een effect met een afbeelding, dat wordt geactiveerd door te scrollen. Door de keuze van de
kleuren ontstaat er een sinister effect.
Om het effect goed te zien kun je het beste de schuifbalk bewegen.
Deze techniek is bij uitstek geschikt als titelpagina van een website.
Op deze pagina wordt uitgelegd hoe je dit voor elkaar krijgt. De code kun je downloaden om zelf te gebruiken, behalve de foto. Daar moet je zelf voor zorgen.
We beginnen met het voorbeeld, dat opent in een nieuw venster of tabblad.
Dit is een bewerking van een script dat ik aantrof in Webdesigner Magazine nr. 80 (oktober 2015), pag. 50 e.v. Dit
blad wordt sinds eind november 2017 niet meer gemaakt.
De auteur van het script is niet bij het betreffende artikel genoemd.
Voor deze site is de vormgeving van het voorbeeld aangepast en is er een 'Pagina Sluiten'-knop aan toegevoegd.
- Er worden twee items besproken:
- De werking van het script.
- Inbouwen in je eigen site.
- De werking van het script
- De code bestaat uit HTML, CSS en Javascript.
- De <body> in de HTML-code heeft de volgende structuur:
<header>
<img src="jouw_foto.jpg" alt="Meeuw">
<img src="overlay.png" alt="Meeuw">
<span class="content">
<h1>Een wereld voor zichzelf</h1>
</span>
</header>
<main>
<strong>Het is niet gemakkelijk</strong><br>
de vlucht van een meeuw te vangen in woorden. Is hij echt
zo vrij als een vogel als hij door de lucht zweeft?
Of heeft-ie alleen maar honger?
</main>
<div class="sluiten">
<a href="javascript:window.close()">Pagina Sluiten</a>
</div>
- De <body> is verdeeld in drie delen:
— Een <header>-blok. Deze bevat de plaatjes en de de titel-tekst (in een <h1>).
— Een <main>-blok. Hier staat de broodtekst in.
— Een <div>-tag. Deze dient alleen om de 'Pagina Sluiten'-knop te
positioneren. - De volgorde van de plaatjes (<img>-tags) is van belang: Eerst de foto en daarna de overlay. Dit is vanwege
referenties aan nth-child() in de CSS en het JavaScript.
- De CSS staat in de file styles.css. Om de opmaak aan te passen voor je eigen gebruik moet je die veranderen.
De foto en de overlay (zie hiernaast op 20% van de werkelijke grootte) liggen bovenop elkaar. Dat wordt met CSS geregeld.
De overlay is een .PNG-bestand, omdat het midden transparant moet zijn.- De overlay is eigenlijk een masker, waardoor de foto geheel of gedeeltelijk te zien is.
- Als de pagina is geladen, is de overlay zo groot, dat je het niet of nauwelijks ziet. Door het scrollen wordt die kleiner,
zodat het zwarte masker steeds meer van de foto bedekt.
- Het beeld van de meeuw verandert door te scrollen. Dat effect kun je niet maken met alleen CSS, dus er wordt JavaScript ingezet.
- Het JavaScript staat in de file sinister.js. Die hoef je niet te veranderen om het te gebruiken.
De misschien wat vreemde naam van deze file zegt iets over de aard van het effect. - sinister.js wordt gelinkt in de <head>-sectie van het document.
- Zodra sinister.js is gelinkt wordt een event-handler gemaakt voor load. Zodra de pagina is geladen wordt deze handler actief en maakt een event-handler aan voor scrollen.
- Als er wordt gescrolled zorgt het JavaScript ervoor dat de foto zwart-wit wordt. Dat gebeurt door de parameter van de
CSS-eigenschap filter:grayscale() te verhogen. Dit gebeurt met zowel de foto als met de overlay.
Het is niet gemakkelijk te zien, want de foto van de meeuw is van zichzelf al bijna zwart-wit. Daardoor is het effect heel subtiel. Je ziet het effect het beste aan de gele snavel. - Tegelijkertijd wordt de overlay van grootte veranderd. Daardoor wordt het 'gat' kleiner en lijkt de omgeving van de meeuw steeds donkerder te worden.
- Als er weer terug wordt gescrolled, keert het effect weer om.
- Inbouwen in je eigen site
- Download de .zip-file, pak hem uit en neem de code op in je HTML-bestand, zoals hierboven en hieronder is aangegeven.
- Regel een mooie achtergrondfoto. Zorg ervoor dat die behoorlijk groot is. Om een idee te geven: de foto van het voorbeeld is 3000 × 4000 pixels groot.
- Pas de CSS-code en de tekst naar je eigen inzichten aan.
- Tenslotte
- Deze techniek is niet geschikt om toe te passen in een (inline-) frame, hier. Dan wordt het al gauw rommelig. Wel kun je hier prima een éénpagina-site mee bouwen.
- Op kleine beeldschermen (lees: smartphones) werkt dit minder goed. Een tablet heb je echt wel nodig om het effect goed zichtbaar te maken.
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">
<script src="sinister.js"></script>
De code voor de <BODY> is hierboven al genoemd.
Downloaden:
Druk op de knop:
File: voorb056.zip, 105 625 bytes.
