JavaScript Libraries for Cool Scrolling Effects

Projekt strony internetowej ożywa z dobrze wykonaną animacją . Jeśli szukasz odpowiednich bibliotek, aby dodać efekty do swojego projektu, tutaj zrobiłem listę niektórych bibliotek, których możesz użyć do nadania efektów w oparciu o Zdarzenie przewijania.

gdy użytkownik przewinie stronę internetową w dół, akcja może być zaprojektowana tak, aby wyzwalać różne opcje animacji, takie jak efekty zanikania, rozmycia, 3D, paralaksa i inne. Istnieje 25 bibliotek JS, które mogą pomóc w osiągnięciu tego rodzaju odpowiedzi w projekcie witryny.

Czytaj więcej: 15 przykładów przewijania w projektowaniu stron internetowych

przewijanie Reveal

biblioteka, która ułatwia dodawanie animacji przewijania zarówno w Internecie, jak i na urządzeniach mobilnych. Możesz ustawić niestandardowe luzowanie, obroty 3D, Czas trwania i wiele parametrów mor do elementu, który chcesz animować.

Dependencies: none | Size: 2.9 kb | Licence: MIT

Aniview

wtyczka współpracująca z programem Animate.CSS, aby włączyć animacje tylko wtedy, gdy element pojawi się w widoku.

Dependencies: jQuery | Size: 1kb / Licence: N / A

Fade Into View

wtyczka, która dodaje efekt fade in / out do elementów Po wejściu lub wyjściu z wcześniej określonych portów widokowych.

Dependencies: jQuery | Size: 3.81 kb | Licence: N/A

WOW

WOW pokaże Animate.animacje css podczas przewijania zdarzenia. 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 „magiczny” efekt, 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 w tworzeniu sceny animacji. Zobacz pełne demo tutaj.

: jQuery, GSAP, Velocity.js | Rozmiar: 16.9 kb | Licencja: MIT

jScrollability

jScrollability umożliwia tworzenie pojedynczych stron internetowych ze złożonymi animacjami scroll. Po srollowaniu przez użytkownika element będzie animowany na podstawie pozycji przewijania. Animacje działają na podstawie głębokości przewijania i oczywiście można ustawić początek i koniec animacji.

Dependencies: jQuery | Size: 1.86 kb / Licence: MIT

js

prosta biblioteka do dodawania efektu dolly-in lub push-in do dowolnego elementu, który działa, gdy użytkownik przewija stronę. Jest to łatwe do wdrożenia: wystarczy dodać parametry start, stop i speed do data-params do elementu HTML.

Dependencies: none | Rozmiar: 4.94 kb / Licencja: N / A

Sclissimo

jest to biblioteka JS do dodawania płynnych animacji sterowanych przewijaniem. Wykorzystuje animacje i linie czasowe Greensock do generowania płynniejszych animacji.

Zależności: GreenShock TweenLite / TweenMax / Rozmiar: 2.94kb / Licencja: Nie dotyczy

jQuery Animation Scroll Plugin

jest to wtyczka jQuery do dodawania animacji wyzwalanej przez viewport za pomocą Greensock. Ułatwia animowanie elementów za pomocą animacji luzowania, przekształcania, skalowania, obracania i 3D.

zależności: jQuery, GreenShock | Rozmiar: 14KB | Licencja: GNU GPL

Circlr

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

zależności: Brak | Rozmiar: 6.05 kb/ Licencja: MIT

Sclilimator

Sclilimator pokaże Ci pozycję i postęp przewijania oraz zwróci wartości, których możesz użyć do zmiany animacji animacji dołączonych do zachowania przewijania użytkownika. Obsługuje przewijanie pionowe i poziome.

zależności: Brak | Rozmiar: 37.7 kb | Licencja: Nie dotyczy

Crossfade

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

dodał: jQuery | Rozmiar: 3.19 kb | Licencja: MIT

efekt przewijania strony

jest to biblioteka dla eksperymentalnych efektów przewijania strony stworzona przez CodyHouse. Wykorzystuje velocitey.animacje js.

zależności: jQuery, Velocity.js / Rozmiar: 17.6 kb | Licencja: N/A

jquery.paralaksa-przewijanie

ta biblioteka Pozwala na dodanie płynnego efektu paralaksy do pionowego przewijania strony. Wystarczy zaimportować jQuery i jquery.złagodzenie.1.3.js, a następnie Dodaj atrybut 'data-parallax' i opcjonalne patametry do elementu, aby dostosować efekt.

zależności: jQuery, jQuery.easing | Rozmiar: 8.72 kb / Licencja: GNU GPL

paralaksa.js

js to prosta wtyczka, która dodaje efekt przewijania paralaksy, zainspirowany stroną Spotify.

dependencies: jQuery | Rozmiar: 6.63 kb / Licencja: MIT

Enllax

Enllax to bardzo lekka biblioteka do stosowania efektu paralaksy do dowolnego elementu przewijania. Możesz ustawić elementy tła lub pierwszego planu, aby uzyskać efekt ethis. Działa zarówno do przewijania pionowego, jak i poziomego.

Dependencies: jQuery | Size: 1.53 kb | Licence: MIT

rozmycie podczas przewijania

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

Dependencies: none | Size: 1.1 kb / Licence: N / A

boxLoader

boxLoader jest prostą wtyczką do ładowania elementów podczas przewijania strony. Parametr, który powinieneś ustawić, to kierunki (x lub y), pozycja na procent, efekt, a także czas trwania.

dependencies: jQuery | Rozmiar: 3.42 kb / Licencja: Nie dotyczy

przechylone przewijanie strony

gdy użytkownik przewija stronę, Ta wtyczka ujawni niesamowity efekt 3D przechylony do skonfigurowanego elementu.

zależności: jQuery | Rozmiar: 1.5 kb | Licencja: GNU GPL

AhRelax

ahrelax umożliwia tworzenie animacji opartych na szybkim przewijaniu. Jest lekki, a także ma świetną wydajność. Więcej na ten temat można przeczytać tutaj.

dependencies: jQuery | Size: 1.6 kb / Licence: MIT

Fancy Scroll

jeśli kiedykolwiek zobaczysz efekt przewijania przepełnienia na Androida lub iOS, dzięki tej wtyczce możesz teraz zastosować to do swojej witryny. Możesz dodać animację, odbicie lub blask, gdy użytkownik osiągnie górę / dół strony.

Dependencies: jQuery | Size: 2.64 kb | Licence: GNU GPL

paralaksa image scroll

ta wtyczka sprawi, że elementy będą się unosić i poruszać, gdy użytkownik przewija stronę w dół lub w górę.

dependencies: jQuery | Rozmiar: 8.69 kb / Licencja: MIT

Rlsmooth

jest to mała wtyczka do tworzenia płynnego efektu, gdy użytkownik scolls dół lub w górę strony. Dostępne są trzy efekty: slide, fade i show.

dependencies: 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. Jest łatwy w konfiguracji: wystarczy zaimportować jQuery, tę wtyczkę i ustawić parametry animacji na znacznikach elementu.

dependencies: jQuery | Rozmiar: 5.45 kb | Licencja: N / A

Parallax ImageScroll

ta wtyczka pozwala nadać efekt paralaksy dowolnemu obrazowi na stronie. Wykorzystuje transformację CSS3, aby efekt działał. Ta wtyczka ma wsparcie dla jQuery i AMD.

dodał: jQuery | Rozmiar: 8.01 kb / Licencja: MIT