Horizontaal scrollende panelen

Een rij panelen schuift horizontaal voorbij terwijl de bezoeker gewoon verticaal scrolt: de sectie wordt vastgezet en de panelen bewegen mee met het scrolltempo. Perfect voor een productshowcase, portfolio of tijdlijn. Elk onderdeel dat je erin zet wordt één paneel. De technische naam is GsapHorizontalScroll.

Gebruik dit block voor content die zich beter leent voor een horizontale volgorde dan een verticale lijst: een portfolio met projecten, een reeks productfeatures of stappen in een proces die je na elkaar wilt tonen zonder dat de pagina eindeloos lang wordt.

Let op de lengte: elk paneel neemt ongeveer een schermbreedte in beslag, dus bij vijf of meer panelen scrollt de bezoeker relatief lang door dezelfde sectie. Voor kortere content is Swiper vaak een lichter alternatief.

Gebruiksscenario's per site-type

Een portfolio-site zet GsapHorizontalScroll vaak in als hoofdnavigatie door het werkoverzicht: elk paneel toont één project, en de bezoeker scrolt zich als het ware door een galerij. Een webshop gebruikt dit block soms voor een uitgelichte productcollectie, waarbij elk paneel een ander product uit de reeks toont. Bij een zakelijke dienstverlener werkt het effect goed voor een stappenplan van het dienstverleningsproces — intake, analyse, uitvoering, oplevering — als opeenvolgende panelen die de klant als een tijdlijn doorloopt.

Veelgemaakte fouten

Een veelgemaakte fout is dit block gebruiken voor tekstzware content: lange lopende tekst leest lastig wanneer die horizontaal wegscrolt in plaats van verticaal blijft staan. Houd de inhoud van elk paneel kort en visueel — een titel, een afbeelding, een paar kernwoorden.

Test dit block altijd op mobiel: horizontaal scrollen via verticale scrollgebaren werkt op touchscreens net iets anders dan met een muiswiel, en te veel panelen kunnen op een klein scherm een lange, vermoeiende scrollsessie opleveren. Overweeg bij twijfel Swiper als alternatief, dat de bezoeker expliciet laat swipen in plaats van passief laat meescrollen, of GsapScrollSteps voor een vergelijkbaar stapsgewijs effect zonder horizontale beweging.

Test de scrollsnelheid na het bouwen altijd zelf: staat de pin-afstand te ruim ingesteld, dan moet de bezoeker onevenredig lang scrollen voor relatief weinig voortgang door de panelen, wat het effect eerder vertragend dan indrukwekkend maakt.

Voorbeeld

De prompt voor dit voorbeeld

Maak een sectie met drie panelen die horizontaal voorbijschuiven terwijl je scrolt.