Główna » zestaw narzędzi » Zbuduj własne efekty przewijania strony dzięki Roll.js

    Zbuduj własne efekty przewijania strony dzięki Roll.js

    W sieci można znaleźć dziesiątki przewijanych bibliotek. Większość z nich jest napisana w JavaScript i ma swoje własne efekty, które możesz zmienić na układy pojedynczych stron, animacje na przewijanie i wiele więcej.

    Ale co z kodowanie własnych efektów przewijania? A może po prostu chcesz w prosty sposób śledzić przewijanie strony przez użytkownika?

    Roll.js to biblioteka, której szukasz. To skrypt open source jest szalony i bardzo łatwy w użyciu. Możesz to zrobić za pomocą kilku linii JavaScript. A co najważniejsze, nie zmusza cię to do wykonywania niczego konkretnego, ale raczej daje ci narzędzia do tworzenia własnych niestandardowych funkcji przewijania.

    Celem tej biblioteki jest pomoc programistom w konstruowaniu efektów przewijania bez większego wysiłku.

    Jeśli spojrzysz na główne repozytorium GitHub, znajdziesz cały przewodnik po konfiguracji z kilkoma przykładowymi fragmentami. Możesz uruchom funkcje, aby wywołać przewijanie użytkownika, lub do innego “szyby” na stronie.

    Działają one najlepiej na układach jednostronicowych, ale możesz używać Roll.js tak bardzo.

    Za pomocą jednego wywołania funkcji można pobierać dane za pomocą każdego zwoju, który zawiera:

    • Suma kroków strony (jeśli dotyczy).
    • Całkowity% przewinięty w dół strony.
    • Aktualna pozycja na stronie w pikselach.
    • Całkowita wysokość rzutni na podstawie rozmiaru urządzenia.

    Działa to również z linkami skoku, które przenoszą użytkowników w dół (lub w górę) do niektórych części strony.

    Ale wiele z tych funkcji można znaleźć także w innych bibliotekach. Co sprawia, że ​​Roll.js jest tak wyjątkowy?

    Częścią tego jest składnia, ale duży sprzedawca to całkowita wielkość biblioteki 8 KB po zminimalizowaniu. To dość małe jak na tak szczegółową bibliotekę przewijania!

    Możesz zobaczyć, jak to działa na głównej stronie demonstracyjnej i możesz nawet pobierz kod źródłowy Roll.js, aby samodzielnie zagłębić się w te demonstracje.

    Wszystko z demonstracji na żywo i plików biblioteki surowej można pobrać z GitHub i są one bardzo łatwe w obsłudze.

    Ale jeśli masz jakieś pytania, sugestie lub chcesz podziękować za wspaniałą bibliotekę, możesz wysłać wiadomość do twórcy @williamngan.