Biblioteki JavaScript do fajnych efektów przewijania

Projekt strony internetowej ożywa dzięki dobrze wykonanej animacji. Jeśli szukasz odpowiednich bibliotek, aby dodać efekty do swojego projektu, tutaj zrobiłem listę niektórych bibliotek możesz użyć, aby dać efekty oparte na zdarzeniu przewijania.

Gdy użytkownik przewinie stronę w dół, akcja może być zaprojektowany do uruchamiania różnych opcji animacji takie jak efekty zanikania, rozmycie, 3D, paralaksa i inne. Istnieje 25 bibliotek JS, które mogą pomóc w uzyskaniu takiej odpowiedzi w projekcie witryny.

Scroll Reveal

Biblioteka ułatwiająca dodawanie animacji przewijania zarówno w Internecie, jak i na urządzeniach mobilnych. Możesz ustawić niestandardowe rozluźnienie, obroty 3D, czas trwania i wiele parametrów mor do elementu, który chcesz animować.

Zależności: brak | Rozmiar: 2,9 kb | Licencja: MIT

Aniview

Wtyczka, która współpracuje z Animate.CSS, aby włączyć animacje tylko wtedy, gdy element wchodzi w rzutnię.

Zależności: jQuery | Rozmiar: 1kb | Licencja: Nie dotyczy

Przejście do widoku

Wtyczka, która dodaje efekt zanikania / pojawiania się do elementów, gdy wchodzą lub wychodzą z wcześniej określonych rzutni.

Zależności: jQuery | Rozmiar: 3,81 kb | Licencja: Nie dotyczy

ŁAŁ

WOW ujawni animacje Animate.css podczas zdarzenia przewijania. Możesz ustawić czas trwania animacji, opóźnienia, przesunięcia i iteracje bezpośrednio ze znaczników HTML, a następnie po prostu wywołać klasę elementu z JS.

Zależności: Animate.css | Rozmiar: 8,23 kb | Licencja: MIT

ScrollMagic

Ta wtyczka pokaże efekt „Magiczny”, gdy użytkownik przewinie stronę. Jest idealny do animowania, przypinania elementu lub przełączania klasy CSS, wszystko w oparciu o pozycję przewijania. ScrollMagic może współpracować z GSAP i VelocityJS przy tworzeniu sceny animacji. Zobacz pełne prezentacje tutaj.

Zależności: jQuery, GSAP, Velocity.js | Rozmiar: 16,9 kb | Licencja: MIT

jScrollability

jScrollability umożliwia tworzenie pojedynczych stron internetowych ze złożonymi animacjami opartymi na przewijaniu. Po przejściu użytkownika element będzie animowany na podstawie pozycji przewijania. Animacje są uruchamiane na podstawie głębokości przewijania i oczywiście można ustawić początek i koniec animacji.

Zależności: jQuery | Rozmiar: 1,86 kb | Licencja: MIT

pushIn.js

Prosta biblioteka do dodawania efektu dolly lub push-in do dowolnego elementu, który działa, gdy użytkownik przewija stronę. Jest łatwy do wdrożenia: wystarczy dodać parametry start, stop i prędkość do dane params do twojego elementu HTML.

Zależności: Żaden | Rozmiar: 4,94 kb | Licencja: Nie dotyczy

Scrollissimo

Jest to biblioteka JS do dodawania płynnych animacji sterowanych przewijaniem. Wykorzystuje animacje i osie czasu Greensock do generowania płynniejszych animacji.

Zależności: GreenShock TweenLite / TweenMax | Rozmiar: 2,94 kb | Licencja: Nie dotyczy

JQuery Animation Scroll Plugin

Jest to wtyczka jQuery do dodawania animacji wywoływanej przez rzutnię za pomocą Greensock. Ułatwia animowanie elementów dzięki łagodności, transformacji, skali, rotacji i animacjom 3D.

Zależności: jQuery, GreenShock | Rozmiar: 14kb | Licencja: GNU GPL

Circlr

Circlr umożliwia tworzenie animacji obrotu elementu, uruchamianej przez przewijanie, zdarzenia myszy lub zdarzenia dotykowe. Idealnie nadaje się do prezentacji produktu, który można oglądać ze wszystkich 360 stopni, aktywowany przez przewijanie użytkownika.

Zależności: Żaden | Rozmiar: 6.05kb | Licencja: MIT

Scrollimator

Scrollimator pokaże postęp pozycji i przewijania oraz zwróci wartości, których można użyć do zmiany animacji animacji dołączonych do zachowania przewijania użytkownika. Obsługuje przewijanie w pionie i poziomie.

Zależności: Żaden | Rozmiar: 37,7 kb | Licencja: Nie dotyczy

Przenikanie

Crossfade to wtyczka do dodawania efektu crossfade do obrazu. Efekt rozmycia będzie kontynuowany, gdy użytkownik przewinie dalej w dół.

Zależności: jQuery | Rozmiar: 3,19 kb | Licencja: MIT

Efekt przewijania strony

Ten jest biblioteką eksperymentalnych efektów przewijania stron stworzonych przez CodyHouse. Wykorzystuje velocitey.js animacje.

Zależności: jQuery, Velocity.js | Rozmiar: 17,6 kb | Licencja: Nie dotyczy

jquery.parallax-scroll

Ta biblioteka umożliwia dodanie płynnego efektu paralaksy do przewijania strony w pionie. Wystarczy zaimportować jQuery i jquery.easing.1.3.js, a następnie dodać „dane-paralaksa” atrybuty i opcjonalne parametry do elementu, aby dostosować efekt.

Zależności: jQuery, jQuery.easing | Rozmiar: 8,72 kb | Licencja: GNU GPL

parallax.js

Parallax.js to prosta wtyczka, która dodaje efekt przewijania paralaksy, inspirowany witryną Spotify.

Zależności: jQuery | Rozmiar: 6,63 kb | Licencja: MIT

Enllax

Enllax to super lekka biblioteka do stosowania przy efektach paralaksy na każdym przewijanym elemencie. Możesz ustawić elementy tła lub pierwszego planu na efekt hav ethis. Działa zarówno do przewijania w pionie, jak iw poziomie.

Zależności: jQuery | Rozmiar: 1,53 kb | Licencja: MIT

Rozmycie na zwoju

Ta biblioteka pomaga dodać efekt rozmycia do obrazu, który zostanie wyzwolony przez przewijanie strony. Im głębiej przewijasz stronę, tym bardziej zamazany jest obraz.

Zależności: Żaden | Rozmiar: 1,1 kb | Licencja: Nie dotyczy

boxLoader

boxLoader to prosta wtyczka do ładowania elementów po przewinięciu strony. Parametr, który należy ustawić, to kierunki (x lub y), pozycja na procent, efekt, a także czas trwania.

Zależności: jQuery | Rozmiar: 3,42 kb | Licencja: Nie dotyczy

Przechylona strona przewijania

Gdy użytkownik przewija stronę, wtyczka ujawni niesamowity efekt przechylenia 3D do elementu, który ustawiłeś.

Zależności: jQuery | Rozmiar: 1,5 kb | Licencja: GNU GPL

AhRelax

AhRelax umożliwia tworzenie animacji opartych na szybkim przewijaniu. Jest lekki i ma świetne osiągi. Możesz przeczytać więcej na ten temat tutaj.

Zależności: jQuery | Rozmiar: 1,6 kb | Licencja: MIT

Fancy Scroll

Jeśli kiedykolwiek zobaczysz efekt przewijania przepełnienia na Androidzie lub iOS, dzięki tej wtyczce możesz teraz zastosować to do swojej witryny. Możesz dodać animację, odbicie lub poświatę, gdy użytkownik dotrze na górę / dół strony.

Zależności: jQuery | Rozmiar: 2,64 kb | Licencja: GNU GPL

Przewiń obraz paralaksy

Ta wtyczka spowoduje, że elementy będą się unosić i przesuwać, gdy użytkownik przewinie stronę w dół lub w górę.

Zależności: jQuery | Rozmiar: 8,69 kb | Licencja: MIT

Rlsmooth

Jest to mała wtyczka do tworzenia płynnego efektu, gdy użytkownik przesuwa się w dół lub w górę strony. Dostępne są trzy efekty: slajd, zanik i pokaz.

Zależności: jQuery | Rozmiar: 1,95 kb | Licencja: MIT

Scrollme

Dodaje proste efekty do przewijania strony, takie jak skalowanie, obracanie, tłumaczenie i zmiana krycia elementów. Łatwo jest skonfigurować: wystarczy zaimportować jQuery, tę wtyczkę, i ustawić parametry animacji na znaczniki elementu.

Zależności: jQuery | Rozmiar: 5,45 kb | Licencja: Nie dotyczy

Parallax ImageScroll

Ta wtyczka pozwala nadać efekt paralaksy dowolnemu obrazowi na stronie. Wykorzystuje CSS3 Transform, aby efekt działał. Ta wtyczka obsługuje jQuery i AMD.

Zależności: jQuery | Rozmiar: 8,01 kb | Licencja: MIT