Oneindig scrollen belichaamt een van de ideale eigenschappen van elk goed ontwerp: mensen kunnen het gebruiken zonder erover na te denken.

Als je het een paar keer bent tegengekomen, vergeet je het. Ik zou zeggen dat de meesten van ons bepaalde toepassingen, of misschien bepaalde soorten toepassingen, zijn gaan verwachten om eenvoudig meer inhoud te laden wanneer we onderaan een pagina gaan. En waarom niet? Het is effectief en vaak handig.

In sommige contexten kan het voortdurend klikken om opeenvolgende pagina's te zien snel een slepen worden. In deze gevallen is paginering geen handig hulpmiddel bij het navigeren, maar een onderbreking van de browse-ervaring. Oneindig scrollen - terwijl het met eigen problemen komt - gaat een lange weg naar het creëren van vloeiendere ervaringen.

Dit geldt vooral als je grote hoeveelheden informatie moet doorzoeken die opgesplitst zijn in kleine stukjes. Veelvoorkomende voorbeelden zijn: Twitter, nieuwssites, tumblogs, afbeeldingengalerijen, enzovoort.

Natuurlijk is het niet voor iedereen, of voor elk project. Voor degenen onder u die besloten hebben om een ​​oneindige liefde toe te voegen aan uw sites, zijn er verschillende effectieve manieren om het eenvoudig toe te passen op uw site:

Oneindig scrollen voor statische sites

In de meeste gevallen zult u dit soort gedrag waarschijnlijk toevoegen aan sites / apps met dynamische inhoud die is opgeslagen in een database. Ik heb besloten om een ​​koppeling op te nemen rond statische sites om twee redenen:

  1. Mogelijk moet u weten hoe u dit specifiek moet doen. Je weet maar nooit.
  2. Zodra u weet hoe u oneindig scrollen naar een statische site kunt toevoegen, kunt u waarschijnlijk dezelfde technieken aanpassen aan elk CMS- of CMS-thema waarmee u bekend bent.

Deze tutorial van Hongkiat.com bevat twee verschillende jQuery-plug-ins voor uw overweging, inclusief Oneindige scroll door Paul Irish.

Oneindig scrollen voor WordPress-sites

Ik weet niet zeker of er een functie of functionaliteit onder de zon beschikbaar is die niet beschikbaar is voor WordPress in de vorm van een plug-in. Oneindig scrollen is natuurlijk geen uitzondering.

Eerst hebben we het opnieuw Oneindige scroll . JEP. Deze jQuery-plug-in wordt geleverd met een officiële WordPress-implementatie die ook door Paul Irish is gemaakt. De link bevindt zich hier op de hoofdsite van de plug-in, prominent en zichtbaar, helemaal bovenaan. Op de pagina staat ook een zelfstudie die u helpt bij het configureren van de plug-in om te werken met uw specifieke WordPress-thema, dus zorg ervoor dat u de documentatie raadpleegt.

Vervolgens hebben we het bewijs dat Automattic, het bedrijf achter WordPress, van ons houdt en wil dat we gelukkig zijn. Ze hebben een gemaakt Jetpack-module dat voegt ook oneindig scrollen toe aan je thema. Nogmaals, u moet mogelijk de plug-in aanpassen om te werken met uw specifieke thema.

Maar wat als u diep in de code wilt duiken en wilt leren hoe u dit vanaf het begin moet doen? WPTuts + heeft dit eerder behandeld diepgaande zelfstudie . Aanbevolen voor mensen met een gemiddeld begrip van front-end code, de tutorial wordt geleverd met alles wat je nodig hebt om oneindig scrollen in je thema te coderen. Sommigen zouden zelfs beweren dat dit de "juiste manier" is om het te doen.

Oneindig scrollen voor Tumblr-thema's

Veel ontwerpers en sommige ontwikkelaars maken gebruik van tumblr om hun gedachten en / of werk te delen. Ben je een van hen? Wilt u dat uw Tumblr-thema oneindig scrolt, net als uw dashboard? Zoek niet verder dan Cody Sherman's tutorial . Omdat het is geschreven voor de gemiddelde, niet-coderende Tumblr-gebruiker, is deze tutorial doodeenvoudig. Dit kost echter geld, omdat dit niet met elk Tumblr-thema werkt.

Mengen oneindig scrollen met andere plug-ins

jQuery Masonry is de klassieke plug-in voor het maken van metselwerkachtige lay-outs op het web. (Persoonlijk vind ik dat de naam het verraadt.) Aangezien metselwerklay-outs alles te maken hebben met het weergeven van de kleine stukjes informatie die vaak goed worden bediend door oneindig scrollen, is het geen verrassing dat veel websites de twee gedragingen combineren. (Zien: Pinterest ) Voor statische sites dient u de officiële documentatie te raadplegen hier.

Isotoop is vergelijkbaar in functie van metselwerk, omdat het is gemaakt om mensen te helpen met metselwerklay-outs. Ik neem het hier op omdat het naar mijn mening eigenlijk beter is. Dit komt vooral omdat ik met vallen en opstaan ​​een echt responsieve metselwerklay-out kon maken met deze jQuery-plug-in. Ik heb minder geluk gehad met anderen. Je ervaringen kunnen variëren. Bekijk de documentatie hier.

Uitgelichte afbeelding / thumbnail, oneindige scroll afbeelding via Shutterstock.