Construiți propriile efecte derulante cu Roll.js
Puteți găsi zeci de biblioteci de defilare peste tot pe web. Cele mai multe sunt scrise în JavaScript și au propriile efecte pe care le puteți restabili pentru layout-uri de o singură pagină, animații în derulare și multe altele.
Dar ce zici codificând propriile efecte de derulare? Sau dacă doriți doar o modalitate simplă de a urmări cât de departe în josul paginii pe care un utilizator a derulat-o?
Roll.js este biblioteca pe care o căutați. Acest script-ul open source este nebun mic și foarte ușor de utilizat. Puteți obține acest lucru cu câteva linii de JavaScript. Și cel mai bine nu te obligă să faci ceva specific, ci mai degrabă vă oferă instrumentele pentru a crea propriile caracteristici personalizate de defilare.
Scopul acestei biblioteci este de a ajuta dezvoltatorii să structureze efectele de defilare fără prea mult efort.
Dacă vă uitați la principalul replică GitHub, veți găsi un întreg ghid de configurare cu câteva fragmente de exemplu. Poti rulați funcțiile pentru a apela cât de departe navighează utilizatorul, sau la diferite “geamuri” pe pagină.
Acestea funcționează cel mai bine pe layout-urile dintr-o singură pagină, dar puteți folosi Roll.js atât de mult.
Cu un apel de o singură funcție puteți trage date cu fiecare defilare care include:
- Pașii totali ai paginii (dacă este cazul).
- Total% scrolled down page.
- Poziția curentă pe pagină în pixeli.
- Înălțimea de afișare totală în funcție de dimensiunea dispozitivului.
Acest lucru funcționează, de asemenea, cu link-uri de salt care aduc utilizatorii în jos (sau sus) la anumite părți ale paginii.
Dar puteți găsi multe dintre aceste caracteristici și în alte biblioteci. Ce face Roll.js atât de special?
O parte din aceasta este sintaxa, dar vânzătorul mare aici este dimensiunea totală a bibliotecii 8KB când este minificată. Asta e destul de mic pentru o bibliotecă de derulare atât de detaliată!
Puteți vedea cum funcționează acest lucru pe pagina principală de demo și puteți chiar descărcați codul sursă Roll.js pentru a sapa în acele demonstrații.
Totul din demo-urile vii și din fișierele bibliotecii brute pot fi extrase de la GitHub și sunt foarte ușor de utilizat.
Dar dacă aveți întrebări, sugestii sau doriți să împărtășiți mulțumirile dvs. pentru minunata bibliotecă, puteți trimite un mesaj către creatorul @williamngan.
