Pagrindinis » Įrankių rinkinys » Sukurkite savo puslapio slinkties efektus su „Roll.js“

    Sukurkite savo puslapio slinkties efektus su „Roll.js“

    Visame žiniatinklyje galite rasti dešimtys slinkančių bibliotekų. Dauguma jų yra parašyta „JavaScript“ ir turi savo efektus, kuriuos galite pakartotinai naudoti vieno puslapio maketams, animacijoms ant animacijos ir dar daugiau.

    Bet ką apie koduoja jūsų pačių slinkimo efektus? Arba, jei norite tiesiog paprasto būdo, kaip stebėti, kiek tolesnis puslapis, kurį vartotojas nuvažiavo?

    „Roll.js“ yra jūsų ieškoma biblioteka. Tai atviro kodo scenarijus yra crazy mažas ir super lengva naudoti. Tai galite gauti su keliomis „JavaScript“ eilutėmis. Ir geriausia iš visų, tai nereiškia, kad jus verčia atlikti bet kokią konkrečią, o greičiau suteikia jums įrankius sukurti savo pasirinktines slinkimo funkcijas.

    Šios bibliotekos tikslas yra padėti kūrėjams susikurti savo slinkimo efektus be didelių pastangų.

    Jei pamatysite pagrindinį „GitHub“ repo, rasite visą sąrankos vadovą su keliais pavyzdžių fragmentais. Tu gali paleiskite funkcijas, kad paskambintumėte, kiek naudotojo sukasi, arba skirtingiems “stiklai” puslapyje.

    Tai geriausiai tinka vieno puslapio maketams, tačiau galite naudoti Roll.js tiek daug.

    Skambindami vienfunkciniu skambučiu, galite traukti duomenis su kiekvienu slinkimu, kuriame yra:

    • Iš viso puslapių veiksmų (jei taikoma).
    • Bendras% slenkamasis puslapis.
    • Dabartinė padėtis puslapyje pikseliais.
    • Bendras peržiūros srities aukštis pagal įrenginio dydį.

    Tai taip pat veikia su nuorodomis, kuriomis naudotojai nukreipiami žemyn (arba aukštyn) tam tikrose puslapio dalyse.

    Bet jūs galite rasti daug šių funkcijų ir kitose bibliotekose. Kas daro Roll.js taip ypatingą?

    Dalis jos yra sintaksė, tačiau didelis pardavėjas čia yra bendras bibliotekos dydis 8KB kai minifikuojama. Tai gana nedidelis toks išsamus slinkties biblioteka!

    Jūs galite pamatyti, kaip tai veikia pagrindiniame demo puslapyje ir netgi galite atsisiųskite „Roll.js“ šaltinio kodą, kad galėtumėte patys įkelti šiuos demo.

    Viskas iš gyvų demonstracijų ir neapdorotų bibliotekų failų gali būti ištraukta iš „GitHub“ ir jie yra labai lengva dirbti.

    Bet jei turite kokių nors klausimų, pasiūlymų ar norite pasidalinti savo padėkomis už nuostabią biblioteką, galite fotografuoti kūrėjui @williamngan.