W tym artykule poznasz 13 wtyczek jQuery, które pozwolą Ci tworzyć niesamowite efekty podczas przewijania strony. Nie przedłużając, przejdźmy do pierwszej z nich.
ScrollMagic
ScrollMagic tworzy efekt „magicznego” przewijania. Jest bardzo popularny i rozbudowany. Główną funkcją tej wtyczki jest animacja elementów w zależności od pozycji scrolla. Dzięki temu można tworzyć bardzo kreatywne projekty.
skrollr
Ten plugin umożliwia utworzenie strony opartej o parallax scrolling. Łatwo go podpiąć i posiada bardzo dobrą dokumentację.
fullPage.js
fullPage.js zamienia stronę w pokaz slajdów. Slajdy mogą być przesuwane w pionie i poziomie. Wtyczka jest bardzo prosta i posiada przejrzystą dokumentację. Testowałem kilka podobnych pluginów i fullPage.js okazał się najlepszy.
jQuery Scroll Path
Świetny plugin pozwalający na zaprojektowanie ścieżki, po której użytkownik będzie przewijał stronę.
Starscroll
Starscroll generuje w canvas pole gwiazd, które dynamiczne porusza się podczas przewijania.
Stellar.js
Stellar.js maksymalnie upraszcza dodanie efektu parallax. Wystarczy dodać kilka atrybutów data i uruchomić plugin $.stellar().
SuperScrollorama
SuperScrollorama to wtyczka autora ScrollMagic. Umożliwia tworzenia świetnych animacji podczas scrollowania.
jInvertScroll
Ta wtyczka zamienia domyślny scroll wertykalny (w pionie) na horyzontalny (w poziomie). jInvertScroll umożliwia również dodanie horyzontalnego efektu parallax.
Section Scroll
Ten bardzo prosty plugin ma tylko jedną funkcję. Dodaje nawigację do stron typu onepage.
ScrollReveal
Proste animacje podczas przewijania. Działają świetnie również na urządzeniach mobilnych.
circlr
circlr pozwala na obracanie elementu podczas scrollowania. Może przydać się w prezentacji produktu.
crossfade.js
Lekki plugin, który umożliwia dodanie efektu zanikania sekcji podczas przewijania.
jQuery Tilted Page Scroll
Ta wtyczka dodaje efekt stopniowego pochylania elementu w czasie przewijania strony.
Znasz inne wtyczki tego typu? Podziel się w komentarzu 🙂
Korona Ziemi z WebSlides – jak tworzyć prezentacje?
Przeczytaj artykuł
Jak stworzyć własny plugin jQuery
Przeczytaj artykuł
Czy zna ktoś wtyczkę, która automatycznie przesuwa do sekcji, jeśli większa jej część jest aktualnie na ekranie? Szukam, szukam i znaleźć nie mogę 😡
Może ktoś podeśle taką wtyczkę, ale ja zrobiłbym tak:
1. Wykryj czy element jest na widoczny (np. przy użyciu https://github.com/dirkgroenen/jQuery-viewport-checker). Tutaj możesz ustawić jaka część sekcji ma być widoczna.
2. W momencie wykrycia możesz przescrollować do sekcji (np. http://stackoverflow.com/questions/16475198/jquery-scrolltop-animation).
Warto wspomnieć o kilku innych, tutaj niewymienionych:
– Sly
– windows (nie mylić z nadal popularnym systemem operacyjnym 🙂
– AnimateScroll
– ScrollMe
– stickUp
– Block Scroll
– Scrolldeck
– Waypoints
– jQuery.kinetic
– Scrolling Progres Bar
Dzięki za listę! Na pewno wielu osobom się przyda 🙂
Ja dorzucam jeszcze kilka:
*Scrollocue
* Parallax
* Responsive 3d Fold Scroll
* jQuery Scrollify
* vivus.js
* jQuery slimScroll
* jQRangeSlider
Reszty stąd jeszcze nie wypróbowałem: https://www.facebook.com/ChallengeRocket/posts/1160816574036851
Świetne, dzięki za listę 🙂
Proszsz!
Polecam najbardziej ScrollMagic.
ScrollMagic to następca SuperScrolloramy przed którą była Scrollorama, wiec powinna zniknąć z zestawienia. A tak na marginesie to ScrollMagic wymiata.