Parallax Scrolling Made Easy Dzięki StickyStack.js

Efekty paralaksy szybko przyciągnij uwagę. Te efekty zachowaj pewne tła w widoku podczas przewijania strony w dół. Znajdziesz paralaksę przewijającą się na wielu stronach internetowych i motywach WordPress, a także dużą część nowoczesnego projektowania stron internetowych.

Możesz także zbudować unikalny styl paralaksy używając StickyStack.js podłącz. Jego zbudowany na jQuery i utrzymuje każdą sekcję strony głównej na górze, gdy przewijasz w dół.

To tworzy iluzja warstwowej strony internetowej gdzie każda strona “półki na książki” na drugim. To naprawdę fajne i łatwe do skonfigurowania.

Chociaż jest to dość łatwe do skonfigurowania, wymaga pewnego zrozumienia rozwoju frontendu.

Najpierw musisz tworzyć poszczególne sekcje strony wewnątrz głównego pojemnika. W ten sposób będziesz miał wszystko zamknięte w HTML, więc możesz kierować wszystko za pomocą funkcji StickyStack jQuery.

Zawiera również kilka opcji, w których można dostosować kontener macierzysty, elementy, które powinny układać się w stos, i możliwe cień pudła jeśli podoba ci się ten efekt.

Tutaj jest przykładowy bit kodu ze strony GitHub:

 $ ('. main-content-wrapper'). stickyStack (containerElement: '.main-content-wrapper', stackingElement: 'section', boxShadow: '0 -3px 20px rgba (0, 0, 0, 0,25)' ); 

Choć nie zostało to zaktualizowane od około dwóch lat, nadal jest to bardzo niezawodna wtyczka. To pracował we wszystkich przeglądarkach, które testowałem (Chrome, Safari i Firefox) z wsparcie dla wszystkich wersji jQuery.

Plus, plik minified jest tylko 2 KB co jest przyzwoitym rozmiarem dla wtyczki.

Aby dowiedzieć się więcej, odwiedź główne repozytorium i zobacz, co może zaoferować StickyStack. Myślę, że najlepiej działa strony jednostronicowe lub strony docelowe z dużymi pełnoekranowymi tłami.

Możesz także sprawdzić demo na żywo na CodePen jeśli chcesz zobaczyć, jak to wygląda na żywo.