Izgradite vlastite efekte pomicanja stranice s Roll.js
Možete pronaći desetke biblioteka za pomicanje po cijelom webu. Većina je napisana u JavaScriptu i ima vlastite efekte koje možete preoblikovati za pojedinačne izglede stranica, animacije na pomicanju i još mnogo toga.
Ali što je s tim kodiranje vlastitih efekata pomicanja? Ili što ako samo želite jednostavan način praćenja udaljenosti stranice koju je korisnik pomicao?
Roll.js je knjižnica koju tražite. Ovaj open source skripta je luda mala i super jednostavna za korištenje. Možete dobiti ovaj rad s nekoliko redaka JavaScripta. I najbolje od svega, ne prisiljava vas da činite nešto specifično, već prije daje vam alate za stvaranje vlastitih prilagođenih značajki pomicanja.
Cilj je ove biblioteke pomoći programerima da strukturiraju svoje efekte pomicanja bez mnogo napora.
Ako pogledate glavni GitHub repo, naći ćete cijeli vodič za postavljanje s nekoliko primjera. Možeš pokretanje funkcija za pozivanje koliko se korisnik pomiče, ili drugačije “stakla” na stranici.
Oni najbolje funkcioniraju na izgledu na jednoj stranici, ali možete koristiti Roll.js za toliko.
S jednim pozivom na funkciju možete povlačiti podatke sa svakim pomakom koji uključuje:
- Ukupni koraci stranice (ako je primjenjivo).
- Ukupna% pomicana dolje stranica.
- Trenutna pozicija na stranici u pikselima.
- Ukupna visina prikaza na temelju veličine uređaja.
To također funkcionira s skočnim vezama koje korisnike (ili gore) dovode do određenih dijelova stranice.
No, mnoge od tih značajki možete pronaći iu drugim knjižnicama. Ono što Roll.js čini tako posebnim?
Dio je sintaksa, ali veliki prodavatelj ovdje je ukupna veličina knjižnice 8KB kada je minificiran. To je prilično mala stvar za tako detaljnu biblioteku!
Možete vidjeti kako to radi na glavnoj demo stranici, a možete čak i preuzmite izvorni kod Roll.js da biste sami otkrili te demo datoteke.
Sve iz demo datoteka uživo i sirovih knjižničnih datoteka može se izvući iz GitHub-a i oni su vrlo jednostavni za rad.
Ali ako imate bilo kakvih pitanja, prijedloga ili želite podijeliti svoju zahvalnost za izvrsnu biblioteku, možete snimiti poruku autorici @williamngan.
