Oändlig rullning förkroppsligar en av de ideala egenskaperna hos någon bra design: människor kan använda det utan att tänka på det.
När du har stött på det ett par gånger glömmer du det. Jag skulle säga att de flesta av oss har kommit att förvänta sig vissa applikationer, eller kanske vissa typer av applikationer, för att helt enkelt ladda mer innehåll när vi träffar en undersida av en sida. Och varför inte? Det är effektivt, och ofta bekvämt.
I vissa sammanhang kan det snabbt bli ett drag att ständigt klicka för att se på varandra följande sidor. I dessa fall är pagination inte ett användbart navigationsverktyg, men ett avbrott i webbläsarupplevelsen. Oändlig rullning - samtidigt som den kommer med egna problem - går långt för att skapa smidigare upplevelser.
Detta gäller speciellt när du måste bläddra i stora mängder information som delas upp i små bitar. Vanliga exempel är: Twitter, nyheter, tumblogs, bildgallerier och så vidare.
Naturligtvis är det inte för alla, eller alla projekt. För dig som har bestämt dig för att lägga till oändlig kärlek till dina webbplatser, finns det flera effektiva sätt att enkelt applicera det på din webbplats:
I de flesta fall kommer du förmodligen att lägga till den här typen av beteende på webbplatser / appar som har dynamiskt innehåll lagrat i en databas. Jag har bestämt mig för att inkludera en länk som kretsar kring statiska platser av två skäl:
Denna handledning från Hongkiat.com har två olika jQuery-plugins för din övervägande, inklusive Oändlig Scroll av Paul Irish.
Jag är inte säker på att det finns någon form av funktion eller funktionalitet under solen som inte har gjorts tillgänglig för WordPress i form av ett plugin. Oändlig rullning är givetvis inget undantag.
För det första har vi än en gång Oändlig Scroll . Japp. Detta jQuery-plugin kommer med en officiell WordPress-implementering som även gjorts av Paul Irish. Länken är precis där på plugins huvudplats, framträdande och synlig, högst uppe. Också på sidan finns en handledning för att hjälpa dig att konfigurera pluginet för att fungera med ditt specifika WordPress-tema, så var noga med att kolla in dokumentationen.
Därefter har vi bevis på att Automattic, företaget bakom WordPress, älskar oss och vill att vi ska vara lyckliga. De skapade en Jetpack-modul Det kommer också att lägga till oändlig rullning till ditt tema. Återigen kan du behöva anpassa plugin-programmet för att arbeta med ditt specifika tema.
Men vad händer om du vill dyka djupt in i koden och lära dig hur du gör det från början? WPTuts + har du täckt med det här ganska djupgående handledning . Rekommenderas för personer med en mellanliggande förståelse av front-end-kod, kommer handledningen med allt du behöver för att skifta oändlig rullning till ditt tema. Vissa skulle till och med argumentera för att detta är "rätt sätt" att göra det.
Massor av designers, och några utvecklare, använder tumblr för att dela sina tankar och / eller arbete. Är du en av dem? Vill du ha ditt Tumblr-tema att rulla oändligt, precis som din instrumentbräda? Titta inte längre än Cody Shermans handledning . Eftersom det skrevs för den genomsnittliga, icke-kodande Tumblr-användaren, är denna handledning död enkel. Detta kommer till en kostnad, eftersom det kanske inte fungerar med alla Tumblr-teman.
jQuery Masonry är det klassiska plugin-programmet för att skapa masonry-layout på webben. (Personligen tycker jag att namnet ger bort det.) Eftersom masonry-layouter handlar om att visa de små bitarna av information som ofta är välbetalda av oändlig rullning, är det inte överraskande att många webbplatser kombinerar de två beteendena. (Se: Pinterest ) För statiska platser bör du kolla in den officiella dokumentationen här.
Isotop har samma funktion som murverk, eftersom det skapades för att hjälpa människor att genomföra murverkslayouter. Jag inkluderar det här eftersom det enligt min mening är faktiskt bättre. Det här beror främst på att jag, genom försök och fel, kunde göra en riktigt responsiv masonrylayout med detta jQuery-plugin. Jag har haft mindre lycka med andra. Dina erfarenheter kan variera. Kolla in dokumentationen här.
Utvalda bild / miniatyrbild, oändlig rulla bild via Shutterstock.