Krimpend startscherm
Bovenaan deze pagina staat een foto. Zodra je scrollt, krimpt de foto en verdwijnt helemaal. Je zou dit kunnen zien als
het "afdekblad" van een onepage-site. Dat is een website waar alle content in één HTML-bestand zit
en die je kunt bekijken door te scrollen.
Op deze bladzijde wordt uitgelegd hoe je zoiets maakt. De code kun je downloaden om zelf te gebruiken, echter zonder de foto.
- De inspiratie voor deze pagina is gekomen door Webdesigner Magazine nr. 79, pag. 68/69
De code op deze bladzijde is een bewerking daarvan.
Dit blad heeft opgehouden te bestaan.
- Er worden twee items besproken:
- De werking van het script, in globale termen.
- Inbouwen in je eigen site.
- De werking van het script
- Dit is een jQuery-plug-in, die een event-listener toevoegd aan de DOM: Zodra er gescrolled wordt, wordt een element met id="shrink" kleiner gemaakt
- Bij laden van de pagina is de foto gewoon zichtbaar.
- Er wordt een event-handler gemaakt die reageert op scrollen. Als er wordt gescrolled wordt er een (anonieme) function gestart die de foto laat krimpen en verdwijnen.
- Voor het krimpen wordt een jQuery-animatie gebruikt, die de hoogte en de breedte van de foto verkleint to nul. Dat gebeurt in 3500 milliseconde (= 3.5 seconde)
- Hierna is de foto niet meer zichtbaar.
- Dit werkt niet met aanraak-schermen, omdat die geen scroll-event hebben (Bij die browsers scroll je niet maar 'swipe' je).
- Dit script heeft een onhebbelijkheid: als je een stukje hebt gescrolled (de foto is dus onzichtbaar) en je daarna de pagina
ververst, verschijnt de foto even en begint direct daarna te krimpen. Dat komt doordat de browser de net ververste pagina
scrollt naar de positie waar die oorspronkelijk stond.
- Het is handig om op de foto een melding te zetten in de trant van "Scroll Down". Dan weet de gebruiker
gelijk wat er van hem verlangd wordt.
- Inbouwen in je eigen site
- Omdat dit een jQuery-plug-in is, heb je jQuery nodig. Alle versies vanaf 1.9 kunnen worden gebruikt. Je linkt het jQuery-bestand in de <head>. Het beste betrek je jQuery vanaf een CDN.
- Het element dat je wilt laten krimpen en verdwijnen zet je direct na de <body>-tag. Het moet het attribuut id="shrink" hebben.
- Net vóór de <body>-tag zet je het JavaScript waarmee een event-handler wordt gemaakt voor het scrollen en dat het element met id="shrink" laat verdwijnen.
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="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
(Zet dit helemaal boven in de <BODY>).
<img id="shrink" src="Dit-is-de-foto.jpg"><br>
(Zet dit helemaal aan het eind van de <BODY>).
<script>
$(function () {
$(window).on('scroll', function() {
var scrollTop = $(this).scrollTop();
var topDistance = $('#shrink').offset().top;
if ( topDistance < scrollTop ) {
$('#shrink').animate({"width": 0, "height": 0}, 3500 );
}
});
});
</script>
Downloaden:
Druk op de knop:
File: voorb451.zip, 544 bytes.
