Izveidojiet savas lapas ritināšanas efektus ar Roll.js

Visā tīmeklī var atrast desmitus ritināšanas bibliotēku. Lielākā daļa ir rakstīta JavaScript, un tiem ir savi efekti, kurus varat atjaunot, lai veiktu vienas lapas izkārtojumus, on-scroll animācijas un vēl daudz vairāk.

Bet ko par kodē savu ritināšanas efektu? Vai arī tad, ja jūs vienkārši vēlaties vienkāršs veids, kā izsekot, cik tālu uz leju ir lietojis lietotājs?

Roll.js ir meklētā bibliotēka. Tas atvērtā koda skripts ir traks mazs un super viegli lietojams. Jūs varat saņemt šo darbu ar dažām JavaScript rindām. Un vissvarīgākais tas nav tas, kas liek jums veikt neko konkrētu, bet drīzāk dod jums rīkus lai izveidotu savas pielāgotās ritināšanas funkcijas.

Šīs bibliotēkas mērķis ir palīdzēt izstrādātājiem veidot ritināšanas efektus bez lielām pūlēm.

Ja jūs aplūkojat galveno GitHub repo, jūs atradīsiet visu iestatīšanas rokasgrāmatu ar dažiem piemēriem. Jūs varat palaist funkcijas, lai izsauktu, cik tālu lietotājs ritina, vai citādāk “rūtīm” lapā.

Tie vislabāk darbojas vienā lapā, bet jūs varat izmantot Roll.js tik daudz.

Izmantojot vienu funkciju zvanu, varat vilkt datus ar katru ritināšanu, kas ietver:

• Kopējais lapu skaits (ja piemērojams).
• Kopējā% ritināšanas uz leju lapa.
• Pašreizējā atrašanās vieta lapā pikseļos.
• Kopējais skata porta augstums, pamatojoties uz ierīces lielumu.

Tas darbojas arī ar pārlēkšanas saitēm, kas ļauj lietotājiem uz leju (vai uz augšu) noteiktām lapas daļām.

Bet daudzas no šīm funkcijām var atrast arī citās bibliotēkās. Kas padara Roll.js tik īpašu?

Daļa no tā ir sintakse, bet lielais pārdevējs šeit ir kopējais bibliotēkas lielums 8 KB kad tie ir minēti. Šāda detalizēta ritināšanas bibliotēka ir diezgan maza!

Jūs varat redzēt, kā tas darbojas galvenajā demonstrācijas lapā, un jūs pat varat lejupielādējiet Roll.js pirmkodu, lai paši varētu tos iekļaut.

Viss no tiešajiem demonstrējumiem un neapstrādātās bibliotēkas failiem var tikt noņemts no GitHub, un tie ir ļoti viegli strādāt.

Bet, ja jums ir kādi jautājumi, ieteikumi vai vēlies dalīties ar jūsu pateicību par lielisko bibliotēku, varat ierakstīt ziņu radītājam @ williamngan.