21 april 2021

carrousel met scroll snap

Scroll snap is een relatief nieuwe feature in CSS, die sindskort ook behoorlijke goed ondersteund wordt. Deze feature was ‘good for nothing’, aldus een angry mob in 2016. Drie jaar later werd de carrousel met scroll snap van Nolan Lawsons echter een stuk positiever ontvangen.

Het was echter niet de carrousel van Nolan, maar de Google Scroll Survey die mij inspireerde. Een standaard ‘header carrousel’ is de perfecte ‘use case’ voor scroll snap. Ik liep tegen Nolans werk aan tijdens mijn onderzoek hiernaar. Nolan beschrijft drie componenten: ‘scroll snap’, ‘smooth scroll’ en ‘pinch to zoom’. In onze carrousel hebben we echter geen pinch to zoom nodig en smooth scroll werkt tegenwoordig met slechts een enkele regel CSS. Ik hoefde dus alleen maar scroll snapping te bouwen. Nolan maakte zich nog druk om IE support, maar wij uiteraard niet meer. Daardoor kon ik anchor links gebruiken in plaats van javscript voor smooth scroll, wat resulteerde in betere prestaties en ‘graceful degredation’.

Benieuwd naar het resultaat?

Check mijn carrousel met native scroll en touch ondersteuning op Codepen. De carrousel scrollt soepel, ‘degradeert’ mooi en is slechts 3kb groot.

Wat betekent dit?

Fantastisch! Maar ik kijk ook graag naar wat deze vooruitgang betekent in het grotere geheel. Door moderne technologie kunnen we namelijk steeds lichtere websites bouwen. HTML en CSS worden steeds krachtiger. Wat ooit 120kb vereiste, kan nu in minder dan 3kb gerealiseerd worden. We hebben ook steeds meer bandbreedte en snellere computers tot onze beschikking. Deze combinatie leidt tot veel nieuwe mogelijkheden. Wat in 2008 nog onmogelijk leek en slechts een grappige reclame was, ligt nu binnen handbereik: het laden van een volledige website in 0.1 seconde. Hoewel direct ladende websites beter bereik, meer conversie en een betere gebruikservaring hebben, beweegt onze branche niet per se in die richting. Gemiddeld worden website steeds zwaarder, wat mogelijk wordt gemaakt door de toenemende bandbreedte. Maar, zoals verwacht, neemt ook de variatie toe. Dit betekent dat je tegenwoordig een keuze hebt.

De keuze is aan jou

Wil je dat je volgende website traag en zwaar is, of… wordt het een razendsnel en vederlicht wonder van moderne techniek? De keuze is aan jou. Geïnteresseerd? Neem contact op!

()  Joost van der Schee