Scrollen met in- en uitzoomeffect

Hieronder zie je een foto met daarnaast een scrollbalk. Als je de scrollbalk gebruikt om te scrollen schuift de foto naar boven om andere foto's te laten zien. Dat gaat gepaard met een leuk zoomeffect.
Op mobiele apparaten met Android is de schuifbalk niet zichtbaar. Daar kun je alleen door de foto's scrollen.

Scrollen doe je met de grip in de scrollbar of met het muis-wieltje. Het zoomeffect is er alleen als de linker muisknop wordt ingedrukt.

Op deze pagina wordt beschreven hoe je zoiets maakt. De code kun je downloaden om zelf te gebruiken, echter zonder de foto's.

• Er worden twee items besproken:
  1. De oorsprong en de werking van het script.
  2. Toepassen in je eigen site.
   
• De oorsprong en de werking van het script
• Dit effect heb ik voor het eerst gezien op de site van Steven Mengin, een digital designer uit Frankrijk die in Londen woont. Het in- en uitzoomeffect is daar inmiddels van verdwenen.
  Het effect is beschreven in Webdesigner Magazine nr. 88 (juli 2016), pag 12 t.m. 14. Dit blad wordt sinds eind november 2017 niet meer gemaakt.
  Het oorspronkelijke script is niet meer beschikbaar op internet. Het script is vermoedelijk gemaakt door Samsy, een vormgever uit Londen.
  Let op: de site van Samsy werkt alleen goed met FireFox, Chrome en Opera. In Edge en Internet Explorer is de site instabiel. De site vraagt veel rekenkracht van de PC..
• Voor deze site is de code minimaal aangepast.
   
• Dit is een jQuery-toepassing, dus je hebt jQuery nodig. Dat betrek je het beste van een CDN. Voor de voorbeelden is versie 1.9.1 gebruikt.
• De code bestaat uit HTML, CSS en JavaScript. De HTML en de CSS (in de file styles.css) moet je aanpassen voor je eigen toepassing.
   
• De HTML-structuur is belangrijk. De afbeeldingen worden opgenomen in een block-level element. HTML heeft daar een heleboel van, maar <div>, <section> en <article> zijn voor deze toepassing het meest geschikt. Op deze site is <article> gebruikt.
• Het block-level element heeft het data attribuut data-scrollsnap="groep1". De waarde "groep1" is niet belangrijk, omdat die in het programma niet wordt gebruikt. Je kunt er alles inzetten wat je wilt.
• Binnen het block-element staat voor elke afbeelding een <a>-tag. Die heeft geen href-attribuut. Daardoor is het geen hyperlink. De cursor verandert niet in een handje als je met de muis over de foto gaat.
• De afbeeldingen worden in de <a>-tags gezet via het attribuut style="background-image:url( … )". De links hebben geen linktekst. Desgewenst kun je hier wel wat tekst in kwijt.
   
• De CSS voor deze techniek is beperkt tot het blok [data-scrollsnap] en de zaken die er onder liggen. Om het goed te laten werken hoeft er alleen gewijzigd te worden aan de afmetingen van het blok zelf. Desgewenst kunnen ook de tijdsduur van het in- en uitzoomen en de schaalfactoren worden aangepast, maar nodig is dat niet.
   
• Het JavaScript zorgt ervoor dat de foto kleiner wordt als je de muisknop indrukt en dat de foto zijn oude grootte weer krijgt als de muisknop wordt losgelaten.
• Als de muisknop wordt ingedrukt, krijgen alle foto's de klasse scrolling. Dat betekent dat de foto's worden verschaald. In het voorbeeld wordt daarvoor de waarde 0.6 gebruikt, maar dat kun je aanpassen aan je eigen smaak.
• Als de muisknop wordt losgelaten, wordt de klasse scrolling verwijderd. De verschaling wordt dus ongedaan gemaakt. Daarbij wordt berekend hoever de reeks foto's gescrolled moet worden zodat de goede foto zichtbaar wordt.
• Aan het JavaScript hoeft niets te worden veranderd om het goed te laten werken.
   
• Toepassen in je eigen site
• Regel een setje mooie foto's. Zorg er voor dat ze allemaal even groot zijn.
• Download de .zip-file en pak hem uit. Zet de code in de webpagina zoals hieronder is aangegeven.
• Pas de CSS aan: maak in het blok [data-scrollsnap] de width en de height gelijk aan de afmetingen van de foto's.
• Verander eventueel in het blok de tijdsduur van transition: all .5s;. Daarmee kun je leuke effecten bereiken.
• Verander eventueel in het blok [data-scrollsnap].scrolling > * de waarden van transform: scale(). Houd ze wel allebei aan elkaar gelijk anders worden de foto's tijdens het effect vervormd.

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">
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>   
<script>
var scrollNode;
 
window.addEventListener("load",function(){
  $.each( $("[data-scrollsnap]"), function(){
    $(this).on("mousedown",function(){
      scrollNode = this;
      $(this).addClass("scrolling");
    });
  });
 
  $(window).on("mouseup",function(){
    $(scrollNode).removeClass("scrolling");
    var height = $(scrollNode).height();
    var position = $(scrollNode).scrollTop();
    var scrollRatio = position / height;
    var yScroll = Math.floor(0.3+scrollRatio)*height;
    $(scrollNode).scrollTop( yScroll );
  });
});
</script>

(Zet dit in de <BODY> op de plaats waar de scrollende foto's moeten verschijnen.).

<article data-scrollsnap="groep1">
  <a style="background-image:url(foto-1.jpg)"></a>
  <a style="background-image:url(foto-2.jpg)"></a>
  <a style="background-image:url(foto-3.jpg)"></a>
  <a style="background-image:url(foto-4.jpg)"></a>
  <a style="background-image:url(foto-5.jpg)"></a>
</article>

Downloaden:
 
Druk op de knop:  File: voorb528.zip, 907 bytes.

Opmerking:
 
Het originele script bevat ook CSS voor het opmaken van de scrollbar naast de foto. Dat is hier niet meegenomen omdat de ondersteuning door de grote browsers te weinig is.