Bygg dina egna sidrullningseffekter med Roll.js
Du kan hitta dussintals rullningsbibliotek över hela webben. De flesta är skrivna i JavaScript och har egna effekter du kan återställa för enkla sidlayouter, on-scroll-animeringar och så mycket mer.
Men vad sägs om kodar dina egna rullningseffekter? Eller vad om du bara vill ha ett enkelt sätt att spåra hur långt ner på sidan en användare har bläddrat?
Roll.js är det bibliotek du letar efter. Detta open source script är galen liten och super lätt att använda. Du kan få det här att fungera med några rader av JavaScript. Och bäst av allt det tvingar dig inte att utföra något specifikt, utan snarare ger dig verktygen för att skapa egna skräddarsydda funktioner.
Målet med det här biblioteket är att hjälpa utvecklare att strukturera sina rullningseffekter utan mycket ansträngning.
Om du tittar på huvud GitHub repo hittar du en hel installationsguide med några exempelbitar. Du kan köra funktioner för att ringa hur långt användaren rullar, eller till olika “rutor” på sidan.
Dessa fungerar bäst på enkelsidiga layouter men du kan använda Roll.js för så mycket.
Med ett enda funktionssamtal kan du dra data med varje rullning som innehåller:
- Totala sidsteg (om tillämpligt).
- Totalt% rullat ner sida.
- Aktuell position på sidan i pixlar.
- Total visningsporthöjd baserat på enhetsstorlek.
Detta fungerar även med hoppa länkar som tar ner användarna (eller uppåt) till vissa delar av sidan.
Men du kan också hitta många av dessa funktioner i andra bibliotek. Vad gör Roll.js så speciellt?
En del av det är syntaxen, men den stora säljaren här är den totala biblioteksstorleken på 8 KB när minifiera. Det är ganska darn lite för ett sådant detaljerat scrollbibliotek!
Du kan se hur det här fungerar på huvuddemosidan och du kan till och med ladda ner Roll.js källkod för att gräva in dem själva.
Allt från de levande demoerna och de råa biblioteksfilerna kan dras från GitHub och de är super lätta att arbeta med.
Men om du har några frågor, förslag eller vill tacka dig för det fantastiska biblioteket, kan du skjuta ett meddelande till skaparen @williamngan.
