Content wijzigen tijdens scrollen
Als je deze pagina naar beneden scrollt, schuift de figuur hier links in beeld (alleen wat groter).
Als je nog wat verder scrollt, verandert de figuur in een foto. Je hoeft daar niets extra's voor te doen.
Op deze bladzijde wordt uitgelegd hoe je dit kunt maken voor je eigen website.
De code van het voorbeeld kun je downloaden om zelf te gebruiken, alleen zonder de illustraties.
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in je eigen site.
- De werking van het script
- De code is opgebouwd uit HTML, wat CSS, en JavaScript.
HTML
- De HTML bestaat uit twee geneste <div>-tags.
- De buitenste <div>-tag heeft id="container" en dient om het effect op de pagina te positioneren.
- De binnenste <div>-tag heeft id="block" en class="original". Hiermee wordt het effect gemaakt.
- De namen van de is's en de class kun je veranderen, eenvoudigweg door de CSS en het JavaScript aan te passen.
- De container staat in de <body> van het document op de plaats waar het effect moet verschijnen.
- CSS
- Als eerste worden de eigenschappen van de container ingesteld. Deze is even breed als het block. De container staat gecentreerd in het document.
- Daarna komt het block. Dat heeft dezelfde afmetingen als de twee plaatjes die er in komen te staan. Verder hoeft hier niets te worden ingesteld.
- De klasse original bevat het plaatje met het vraagteken. original wordt door het JavaScript vervangen door
de klasse changed, dat bevat het plaatje van de wolkenlucht bij avond.
- JavaScript
- Voor deze toepassing wordt de bibliotheek waypoints.js gebruikt. Daarmee kun je eenvoudig reageren op scroll-events. Het is beschikbaar in uitvoeringen voor stand-alone gebruik of voor gebruik met jQuery of Zepto. Hier is de stand-alone versie gebruikt.
- Het JavaScript moet na de HTML komen. Je maakt een variabele aan (in het voorbeeld is de naam waypoint) gebruikt) en daarin zet je een Waypoint-object.
- In het object koppel je id van het element waarop het effect moet werken (hier is dat de content van block) en je geeft aan wat er moet gebeuren (de klasse original vervangen door de klasse change).
- Je stelt hier ook de offset in. Dat is het percentage van het document dat moet worden gescrolled vóór dat de verwisseling van de plaatjes wordt uitgevoerd.
- Er zijn nog veel meer mogelijkheden met deze bibliotheek, zie daarvoor de website van waypoints.js.
- Toepassen in je eigen site
- Download de .zip-file en pak hem uit. Bouw de code op zoals hieronder wordt getoond.
- Download waypoints.js van de website. Kies de versie die je wilt gebruiken: Met jQuery, met Zepto of zonder platform. Gebruik de geminificeerde versie van de code (met .min.js in de filenaam), die laadt sneller.
- Voeg het benodigde JavaScript toe aan je document.
- Pas de CSS aan aan je eigen voorkeuren.
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>).
<script src="noframework.waypoints.min.js"></script>
<style>
#container {
width: 250px;
margin: 0 auto;
}
#block {
width: 250px;
height: 187px;
}
.original {
background-image: url("plaatje.jpg");
}
.changed {
background-image: url("foto.jpg");
}
</style>
(Zet dit in de <BODY> op de plaats waar het effect moet verschijnen).
<div id="container">
<div id="block" class="original"></div>
</div>
<script>
var waypoint = new Waypoint({
element: document.getElementById('block'),
handler: function (direction) {
this.element.classList.remove('original');
this.element.classList.add('changed');
},
offset: '50%'
})
</script>
Downloaden:
Druk op de knop:
File: voorb550.zip, 554 bytes.
