Vytvárať vlastné scrolling efekty s Roll.js
Nájdete tu desiatky scrolling knižníc po celom webe. Väčšina z nich je napísaná v jazyku JavaScript a má svoje vlastné efekty, ktoré môžete upraviť pre rozloženie jednotlivých stránok, animácie na prechode a oveľa viac.
Ale čo kódovanie vlastných rolovacích efektov? Alebo ak chcete len jednoduchý spôsob, ako sledovať, do akej miery sa posúva stránka, ktorú používateľ posúval?
Roll.js je knižnica, ktorú hľadáte. toto open source skript je bláznivý malý a super ľahko sa používa. Môžete si túto prácu s niekoľkými riadkami JavaScript. A najlepšie zo všetkého vás núti vykonať niečo konkrétne, ale skôr vám dáva nástroje na vytvorenie vlastných vlastných rolovacích funkcií.
Cieľom tejto knižnice je pomôcť vývojárom štruktúrovať ich scrolling efekty bez veľkého úsilia.
Ak sa pozriete na hlavné repo služby GitHub, nájdete celú príručku s niekoľkými príkladmi úryvkov. Môžeš spustite funkcie, aby ste zistili, ako ďaleko sa používateľ posúva, alebo iným “tabuľa” na stránke.
Títo používajú najlepšie jednostránkové rozvrhnutie, ale môžete použiť Roll.js toľko.
Pri volaní s jedinou funkciou môžete s každým posúvaním vytiahnuť údaje, ktoré zahŕňajú:
- Celkové kroky stránky (ak sú použiteľné).
- Celkom% posunutých stránok.
- Aktuálna pozícia na stránke v pixeloch.
- Celková výška výhľadu závisí od veľkosti zariadenia.
To tiež funguje s odkazmi na skok, ktoré prinášajú používateľom nadol (alebo hore) do určitých častí stránky.
V mnohých iných knižniciach nájdete aj veľa týchto funkcií. Čo robí Roll.js tak zvláštne?
Časť je syntax, ale veľkým predajcom je celková veľkosť knižnice 8 KB keď je minimalizovaný. To je dosť malý na takú podrobnú scrolling knižnicu!
Môžete vidieť, ako to funguje na hlavnej demo stránke a môžete dokonca stiahnite si zdrojový kód Roll.js, aby ste sa sami oboznámili s týmito ukážkami.
Všetko zo živých ukážok a surových knižničných súborov je možné vytiahnuť z GitHub a je s nimi veľmi jednoduché pracovať.
Ale ak máte nejaké otázky, návrhy alebo chcete podeliť o svoje vďaky za úžasnú knižnicu, môžete poslať správu na autor @williamngan.
