Jak zrobić efekt parallax na stronie (bez jQuery)

W tym tutorialu stworzymy efekt parallax. Chcąc być w zgodzie z najnowszymi trendami i standardami jakościowymi, podczas realizacji i selekcji sposobu osiągniecia zamierzonej animacji, celowo będziemy unikać biblioteki jQuery. Unikanie jQuery pozwoli stworzyć szybką i wydajną stronę oraz łatwo adaptować efekt do istniejących stron.

Co to jest efekt parallax?

Efekt paralaksy (ang. parallax) to pozorny ruch obiektów względem siebie podczas zmiany punktu widzenia, które są umieszczone w różnych odległościach od obserwatora.

Jak zwykle najlepiej pokazać to na przykładzie, zobacz film na koońcu artykułu 🙂 Będzie nam zależeć właśnie na takim efekcie. Czyli wolniejszy ruch tła elementu (obrazek lub wideo) niż sam element z jego zawartością.

Jak działa efekt parallax CSS/JS?

Efekt parallax mimo pewnej widowiskowości jest łatwy do wykonania. W jednej z pierwszych realizacji tworzonych na zlecenie, wykonałem taki efekt bez większych trudności. Byłem jeszcze wtedy na etapie, kiedy wszystkie elementy wykonywałem od podstaw, bo myślałem, że tak jest lepiej i prościej a o frameworkach czy gotowych bibliotekach nie chciałem nawet słuchać :). Ego poczatkującego programisty nie przyjmowało do wiadomości, że można wykorzystać czyjś, dużo lepszy (bo dopracowany) kod.

Ponieważ parallax potrzebuje zdarzenia przewijania, trzeba poznać zdarzenie scroll w JavaScript:

document.addEventListener('scroll', function(e) {
/* Jakiś kod*/
}

Parallax to najczęściej lekki ruch tła. Odbywa się on za pomocą zmiany wartości CSS background-position. Jeżeli mamy kilka takich elementów wystarczy teraz użyć wygodnej metody querySelectorAll:

var parallax = document.querySelectorAll('.parallax');

Instrukcję, która dynamicznie styluje tło elementów z klasą parallax wystarczy dodać do pętli foreach:

Array.prototype.forEach.call(parallax, function(el, i){
el.style.backgroundPosition = 'center '+ (window.scrollY/3)+'px';
}

Taki parallax będzie jakoś działał. Do rozwiązania jest optymalizacja, bo aktualizujemy wartości nawet dla tych tych elementów, które nie są widoczne na ekranie. Możliwości konfiguracyjne też pozostawiają wiele do życzenia – zmiana cyfry 3, która ma spowalniać animację to jedyne ustawienie jakie możemy na ten moment wykonać. Użyjmy lepiej gotowej biblioteki…

Jarallax – biblioteka parallax bez zależności jQuery

Z pomocą przychodzi gotowa biblioteka Jarallax autorstwa: nK, bo choć kodowanie efektu parallax jest ciekawe i nie jest bardzo skomplikowane, wykorzystanie wtyczki, nad którą ktoś popracował przez dłuższy czas i wydał kilka jej wersji na pewno będzie bardziej opłacalne i zwolni nas z rozwiązywania problemów, które dawno są już rozwiązane i przetestowane na różnych urządzeniach.

Użycie Jarallax polega na dodaniu stylu CSS i JS – podobnie jak w przypadku innych podobnych bibliotek. W sekcji CSS dodajemy:

.jarallax {
     position: relative;
     z-index: 0;
 }
 .jarallax>.jarallax-img {
     position: absolute;
     object-fit: cover;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
 }
 .jarallax {
     height: 100vh; /* Opcjonalnie */
 }

Nie obejdzie się bez dodania pobranego skryptu

<script src="js/jarallax.min.js"></script>

Inicjalizację można wykonać na dwa sposoby albo w samym elemencie, którego tło ma mieć efekt parallax:

<section class="jarallax" data-jarallax data-speed="0.5">
   <img class="jarallax-img" src="obrazek.jpg">
</section>

lub w kodzie JavaScript wywołujemy metodę jarallax:

jarallax(document.querySelectorAll('.jarallax'), {
   speed: 0.4
});

Jak można się domyślić, parametr speed determinuje tempo przewijania. Polecam wykonać własne eksperymenty i stosować taką wartość aby była ona zgodna z efektem jaki chcemy uzyskać.

Efekt parallax – wideo w tle

Biblioteka Jarallax pozwala też na wykorzystanie w tle materiałów wideo czyli filmów i innych animacji. Aby wykorzystać wideo należy dodać kolejny plik JavaScript:

<script src="js/jarallax-video.min.js"></script>

Wystarczy teraz zainicjalizować film w taki sposób:

<div class="jarallax" data-jarallax-video="mp4:./video/film.mp4,webm:./video/film.webm,ogv:./video/film.ogv">
Jakiś napis…
</div>

Dlaczego używamy kilku plików możesz przeczytać w artykule: optymalizacja filmów/wideo na stronę internetową.

Można też używać filmów z YouTube:

<div class="jarallax" data-jarallax-video="https://www.youtube.com/watch?v=-c8__m245-w" data-speed="0.2" >
Jakaś zawartość…
</div>

Działa to tylko wtedy, kiedy strona jest umieszczona na serwerze.

Jarallax pozwala użyć dodatkowych parametrów, z którymi można zapoznać się w dokumentacji: https://github.com/nk-o/jarallax

Efekt końcowy

Zalety Jarallax

• przede wszystkim lekkość (plik waży ok. 15KB),
• wsparcie dla lokalnych plików wideo, YouTube i Vimeo
• możliwość inicjalizacji w HTML i w kodzie JavaScript,
• możliwość regulowania tempa paralaksy i innych opcji,
• wydajność i przyjazność dla SEO (wtyczka nie generuje nadmiarowego kodu),
• obrazy w formie img pozwalają wykorzystać mechanizm zdjęć responsywnych (srcset), natywnego lazy loadingu i tagu picture, który pozwoli serwować formaty graficzne nowej generacji.

Podsumowanie

Jarallax to bardzo wygodna wtyczka do tworzenia efektownej paralaksy. Ta lekka biblioteka pozwoli z łatwością dodać efekt parallax do każdej strony internetowej. Biblioteka rozwiąże większość komplikacji, z którymi musielibyśmy się uporać chcąc stworzyć taki efekt samodzielnie.

Źródła

https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event

https://github.com/nk-o/jarallax#b-javascript-way