8 CSS- och JavaScript-kodavsnitt för att lägga till rullningseffekter på din webbplats…

Resor är en av de mest grundläggande uppgifterna som vi ber våra användare. Och att döma av antalet rullningar på webbplatser och appar idag, kräver vi mycket.

Att lägga till rullningsbaserade effekter kan vara ett bra sätt att förbättra användarupplevelsen. Det vill säga, så länge de inte stör möjligheten att navigera genom långa delar av innehåll. Om något, effekterna gör saker enklare och ger lite känsla till mixen.

Här är en samling rullningseffekter och widgets som kommer att överraska dina besökare och (förhoppningsvis) undvika dig.

Avsnitt för avsnitt

Moderna webbplatser är ofta uppdelade i flera delar av innehåll, var och en med distinkta element. Det här praktiska utdraget lägger till en knapp (tillgänglig i flera stilar) längst ner på skärmen som låter användaren klicka och rulla ner till nästa avsnitt. Använd CSS ID tillsammans med jQuery för att navigeringen ska fungera.

Visa penna
demo: Naoyas CSS Scroll-knapp

Alla tecken på att du rör på dig

Scrollmätare har blivit mycket populära på innehållsrika webbplatser. De kommunicerar en användares avstånd från en berättelse på en lättsmält metod. Bonus att denna lösning bara är CSS.

Visa penna
CSS Scroll Indicator av Mike (@MadeByMike)

Du kan scrolla om du vill

Tja, det här utdraget är inte nödvändigtvis en effekt. Men det tjänar ett syfte. Mycket ofta använder designers helskärmsbakgrunder och andra element som kan göra rullning otydlig för användaren. Med det låter små element som den här animerade rullningsikonen användaren veta att ja, det kommer mer. Det är inte lämpligt för alla situationer, men det finns tillfällen då det är vettigt.

Visa penna
CSS Site Scroll Micro Animation av Ryan Mulligan

Titlarna krymper otroligt

Sticky titlar som denna har blivit en stapelvara genom åren. Varför? De kan lägga till massor av bekvämlighet för användaren. Möjligheten att navigera till andra delar av en webbplats utan att behöva scrolla till toppen gör livet enklare. Som vanligt krymper det här exemplet till ett mer kompakt element när du rullar ner på sidan.

Visa penna
Scrolling Titlar av Blake Bowen

Svep åt höger

Här är en annan version av dekaltiteln. Den här gången är det konfigurerat för en ensidig webbplats. Den övre navigeringen markerar automatiskt det aktuella innehållet och låter användare snabbt växla mellan dem.

Visa penna
Ettrics. Sticky Slider Navigation

Hög prestation

Låt oss ta en titt på en annan kodbit som är bra för ensidiga eller långa webbsidor med flera delar av innehåll. Använd CSS och lite jQuery för att ändra bakgrundsfärgen när du scrollar ner (och ja det fungerar tvärtom också). Du kanske också vill fråga ett skript som gör samma sak, men med gradienter.

Visa penna
Ändra bakgrundsfärg medan du rullar version 2 av JP Nothard

Vertikal till horisontell konvertering

Har du någonsin velat att din webbplats ska rulla horisontellt istället för vertikalt? Du kan göra det utan några snygga skript, naturligtvis. Men vad händer om du inte vill ha en horisontell rullningslist? I så fall behöver du något liknande det här exemplet. Den använder ett skript som heter jInvertScroll, som gör din webbplats till en sidoscroll, komplett med parallaxeffekter.

Visa penna
Sidrullning från jInvertScroll av SitePoint

Animera på scroll

Bland de viktigaste trenderna idag är animeringen av innehållet när det kommer in i grafikfönstret. När du är klar med god smak kan du uppmärksamma varje del. Men går för långt och är som en onlinecirkusakt. Om du bestämmer dig för att gå djupt, överväg detta utdrag. Det tillhandahålls av AOS-biblioteket (Animated Scrolling).

Visa penna
AOS – Animation Snik

Bläddra, webbanvändare

Tidigare var den rådande tanken att till varje pris undvika förflyttning. Nu har sociala medier och smartphones tillåtit oss att täcka långa stycken med tummen (och pekaren). Så vi kan också göra det roligt och användbart.

Det var vad de tidigare styckena var tänkta att göra. De täcker ett brett spektrum av användningsfall och undviker för det mesta distraktioner. Det är vad det handlar om att bygga en solid UX.

Letar du efter fler idéer? Kolla in vårt CodePen-galleri för fler rullande utdrag!