Długie przewijane witryny stały się bardzo popularnym trendem w tworzeniu stron internetowych. Jednym z najfajniejszych podtypów tego są witryny przewijania paralaksy, w których obrazy poruszają się, dając efekt paralaksy. Gdy użytkownik przewinie stronę, animacje zostaną wyzwolone i ogólnie nadają świeżemu wyglądowi i odczuciu każdej stronie internetowej, jeśli zostanie ona poprawnie zaimplementowana.
Tworzenie strony z przewijaniem paralaksy jest często uciążliwe, ponieważ wymaga dogłębnej znajomości CSS, JavaScript i dobrego projektowania stron internetowych. Oto lista najlepszych wtyczek przewijania paralaksy, które nie tylko ułatwiają tworzenie witryn z przewijaniem paralaksy, ale także dobrze zaopatrzoną bibliotekę efektów paralaksy, dzięki czemu tworzenie dobrze wyglądającej strony internetowej staje się łatwiejsze i szybsze .
OŚWIADCZENIE : Przed rozpoczęciem należy pamiętać, że aby korzystać z tych wtyczek, wymagana jest znajomość technologii internetowych (HTML / CSS / Javascript). Większość wymienionych wtyczek używa jquery, więc może być potrzebna znajomość Jquery.
Wtyczki przewijania Parallax
1. ScrollMagic
ScrollMagic jest jedną z najpopularniejszych wtyczek jQuery. Jest to biblioteka javascript umożliwiająca tworzenie pozornie magicznych efektów przewijania. Za pomocą ScrollMagic możesz animować na podstawie pozycji przewijania. Oznacza to, że możesz poprawiać, przenosić lub animować elementy HTML podczas przewijania, na dowolny czas, a także łatwo dodawać efekty paralaksy do swojej witryny. Jest wysoce konfigurowalny i jest również lekki (6kb, gdy gzipowany). Spośród innych wtyczek przewijania paralaksy, Scroll Magic ma najlepszą dokumentację i zasoby zewnętrzne. Jest również całkowicie kompatybilny z telefonami komórkowymi.
ScrollMagic ma wiele wymienionych przykładów. Sprawdź je, szukając inspiracji i wskazówek dotyczących korzystania z tej biblioteki.
O:
Strona domowa: //janpaepke.github.io/ScrollMagic/
Stworzone przez: Jan Paepke
Instalacja:
1. CDN:
2. Pobierz z Github
2. skrollr
skrollr to lekka, czysta biblioteka JavaScript i CSS, bez udziału jQuery. Jest to w zasadzie "Scroll Magic uproszczony dla CSS". Aby użyć skrollr, nie musisz znać JavaScript ani żadnej jQuery. Wystarczy HTML i CSS. skrollr używa atrybutów danych do animowania dowolnego żądanego elementu HTML. Jedną z głównych wad skrollr jest to, że animacje działają tylko podczas przewijania strony. W przeciwnym razie wszystkie efekty zostaną wstrzymane. skrollr pozwala animować wszystkie właściwości CSS elementów HTML.
O:
Strona domowa: //prinzhorn.github.io/skrollr/
Stworzone przez: Prinzhorn
Instalacja: Pobierz z Github
3. pagePiling.js 
Page Piling to wtyczka jQuery, która umożliwia tworzenie witryny w różnych sekcjach, które układają się jeden na drugim. Po przewinięciu lub uzyskaniu dostępu do adresu URL, każda sekcja zostanie ujawniona w schludnej animacji. pagePiling.js jest kompatybilny ze wszystkimi platformami - komputerowymi, tabletami i mobilnymi - i współpracuje z większością przeglądarek. To degraduje się z gracją na starszych przeglądarkach, które nie obsługują jego animacji (jak IE 7). Aby skorzystać z wtyczki, musisz umieścić w kodzie HTML plik CSS i plik JavaScript. pagePiling.js jest inicjowana przez (document) .ready function:
$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});
W przypadku bardziej zaawansowanych inicjalizacji przejdź do pliku README.md.
O:
Strona domowa: //alvarotrigo.com/pagePiling/
Utworzone przez: alvarotrigo
Instalacja: Pobierz z Github
4. Alton
Alton jest wtyczką jQuery 'scroll-leing to us'. Przewijanie podniebne oznacza, że natywny przewijanie przeglądarki jest wyłączone na rzecz celowego przewijania, które po uruchomieniu (za pomocą kółka myszy lub touchpada) przeniesie Cię do następnego pionowego punktu na ekranie lub do góry następnego kontenera.
Alton udostępnia trzy oddzielne funkcje, zwane "Hero", "Bookend" i "Standard". Standard pozwala na przewijanie całej strony, z każdą sekcją o wysokości 100%. Zwój przedstawia następną sekcję lub poprzednią sekcję. Bookend pozwala ci na stworzenie gry typu bookend, podczas gdy Hero pozwala przewijać tylko sekcję "Hero", a reszta strony ma (ponownie włączone) natywne przewijanie.
O:
Strona domowa: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Utworzone przez: paper-leaf
Instalacja: Pobierz z Github
5. Stellar.js
Stellar to wtyczka jQuery, dzięki której możesz łatwo dodać efekty przewijania paralaksy. Aby uruchomić, najpierw musisz uruchomić funkcję $ .stellar (). Ustawienia animacji dla poszczególnych elementów można skonfigurować za pomocą atrybutów danych na tym elemencie.
Stellar pozwala nawet mieć tła paralaksy, które są tłem, które zmienia położenie na przewinięciu. Jedną z najbardziej przydatnych funkcji Stellar.js są przesunięcia.
Wszystkie elementy powrócą do pierwotnego położenia, gdy ich przesunięty rodzic znajdzie się poza krawędzią ekranu - plus lub minus własne przesunięcie opcjonalne. Pozwala to na łatwe tworzenie skomplikowanych wzorów paralaksy. (Dokumentacja gwiezdna)
O:
Strona domowa: //markdalgleish.com/projects/stellar.js/
Stworzony przez: Mark Dalgeish
Instalacja: Pobierz z Github
6. multiScroll.js
Ta wtyczka jest tworzona przez tego samego programistę (alvarotrigo), który przygotował wtyczkę pagePiling.js. To, co zasadniczo robi multi scroll, pozwala stworzyć efekt, w którym każda sekcja strony ładuje się w dwóch podzielonych częściach, które przesuwają się w miejscu podczas ładowania strony. Sprawdź stronę główną, aby zobaczyć, jak to wygląda w Twojej przeglądarce. Funkcja multiScroll.js umożliwia ustawienie szybkości przewijania, wygładzania, opcji przewijania klawiatury i wielu innych właściwości, dzięki czemu można dostosować efekt dokładnie tak, jak tego potrzebujesz.
O:
Strona domowa: //alvarotrigo.com/multiScroll/
Utworzone przez: alvarotrigo
Instalacja: Pobierz z Github
7. ScrollMe
ScrollMe to wtyczka do dodawania prostych efektów przewijania paralaksy na twoją stronę. Podczas przewijania w dół można skalować, obracać, tłumaczyć i zmieniać krycie elementów na stronie. ScrollMe nie wymaga JavaScriptu i wystarczy tylko znajomość CSS. Dodając klasę "animateme" i wymagane atrybuty danych, możesz animować dowolny element HTML. ScrollMe najlepiej nadaje się do dodawania efektów CSS. Jest lekki i wszystkie animacje są płynne, o ile używasz ich z umiarem.
O:
Strona główna: //scrollme.nckprsn.com/
Stworzone przez: Nick Pearson
Instalacja: Pobierz z Github
8. Przewijanie paralaksy
Parallax Scroll to łatwa w użyciu wtyczka jQuery, która umożliwia tworzenie efektu przewijania obrazu paralaksy na stronach takich jak Spotify. Jest dość prosty w użyciu - wystarczy podać wymagane klasy CSS dla posiadaczy obrazów. Zamiast używać tagi, aby korzystać z tej wtyczki, musisz użyć elementów, które mają określony obraz tła (za pomocą właściwości CSS `background-image` możesz sprawić, że elementy będą reagować za pomocą zapytań CSS @media.
O:
Strona domowa: //parallax-scroll.aenism.com/
Stworzone przez: Aen
Instalacja: Pobierz z Github
9. Jarallax
Jarallax to biblioteka CSS i JavaScript, która specjalizuje się w efektach przewijania paralaksy. Jarallax jest skonfigurowany przy użyciu JavaScript (bez jQuery, tylko czysty waniliowy JS). Obsługuje wygładzone funkcje przewijania, łagodzenie i animację paralaksy. Jarallax jest obsługiwany przez większość przeglądarek na różnych platformach. Witryna internetowa Jarallax posiada doskonałą dokumentację, jak dostosować Jarallax do swoich potrzeb. Jarallax ma także samouczki wideo pokazujące, jak skonfigurować Jarallax na swojej stronie internetowej i jak zacząć.
O:
Strona główna: //www.jarallax.com/
Stworzone przez: Jarallax
Instalacja: Pobierz ze strony Jarallax
10. Superscrollorama
Superscrollorama to wtyczka jQuery, która obsługuje animacje przewijania. Jest on zasilany przez TweenMax i Greensock Tweening Engine, który zwiększa wydajność animacji i gładkość. Animacje Superscrollorama są wywoływane przez jQuery i można również korzystać z większości funkcji TweenMax.js. Niestety te animacje nie są w pełni obsługiwane przez urządzenia mobilne (ponieważ urządzenia z ekranem dotykowym obsługują przewijanie w inny sposób). Jednak za pomocą metody setScrollContainerOffset można uzyskać dostęp do efektów Superscrollorama na urządzeniach mobilnych.
Oto kod dla tego:
.setScrollContainerOffset(x, y)
(x: przesunięcie x elementu scrollcontainer, y: przesunięcie x elementu scrollcontainer)
O:
Strona domowa: //johnpolacek.github.io/superscrollorama/
Utworzone przez: johnpolacek
Instalacja: Pobierz z Github
ZOBACZ RÓWNIEŻ: 10 najlepszych statycznych generatorów stron
