[JS] Jak zrobić efekt poruszającego się tła – czyli kilka słów o efekcie parallax

Ostatnio za pomocą systemu wiadomości na fanpage'u bloga, na Facebooku, skontaktował się ze mną jeden z czytelników i poprosił mnie o wyjaśnienie zasady działania efektu jaki osiągnięto na jednej ze stron. Postanowiłem przyjrzeć się temu zagadnieniu i okazało się, że zastosowano tam efekt parallax, znany już od dłuższego czasu.

Czym jest efekt parallax?

Efekt parallax polega na przesuwaniu się kilku nakładających się warstw z obrazkami z różną prędkością podczas ruchu kursora, tj. obrazki w dolnych warstwach przemieszczają się wolniej niż obrazki w górnych warstwach. Takie podejście ma imitować efekt 3D, podobny do efektu który widać na niektórych telewizorach wyposażonych w funkcję 3D. Należy dodać, że każda warstwa zawiera jakąś treść, przeważnie półprzezroczysty obrazek lub obrazek z przezroczystym tłem.

Na powyższym obrazku została przedstawiona prosta grafika, która składa się z czterech warstw. Daleko w tle jest niebieskie niebo. Na warstwie wyżej znajduje się słońce. Na kolejnej, umieściłem domek, a na najwyższej jest coś co robi za pagórek z łąką.

Implementacja efektu parallax przy pomocy pluginu jQuery - jQuery.parallax

Po wstępnych oględzinach strony, o której wspomniał czytelnik, dotarłem do informacji, że wykorzystano plugin jQuery.parallax, dzięki temu osiągnięto tamten całkiem ciekawy efekt.

Aby osiągnąć wyżej wymieniony efekt, należy przygotować następującą strukturę kodu HTML:

1
2
3
4
5
6

<div class="parallax-viewport">
  <div class="parallax-layer"><img src="bg-1.png" alt="Tło" width="640" height="360" /></div>
  <div class="parallax-layer"><img src="bg-2.png" alt="Słońce" width="640" height="360" /></div>
  <div class="parallax-layer"><img src="bg-3.png" alt="Domek" width="640" height="360" /></div>
  <div class="parallax-layer"><img src="bg-4.png" alt="Wzgórze" width="640" height="360" /></div>
</div>

Następnie, należy dodać style CSS, które określą ramy w których efekt będzie osiągalny:

1
2
3
4
5
6
7
8
9

.parallax-viewport { 
  position: relative; 
  overflow: hidden; 
  width: 640px; 
  height: 360px; 
}
.parallax-layer { 
  position: absolute; 
}

Jak widać, póki co nic szczególnego. Określiliśmy rozmiar obszaru z efektem parallax oraz nadaliśmy warstwom z poszczególnymi obrazkami pozycjonowanie absolutne względem rodzica. Mając tak przygotowany kod możemy podpiąć plugin jQuery.parallax do naszego kodu HTML za pomocą następującego kawałka kodu Javascript:

1
2
3

(function ($) {
  $('.parallax-layer').parallax({}, {}, {xparallax: '200px'});
})(jQuery);

I to jest caly kod, który podpina plugin jQuery do naszego kodu HTML. Muszę wspomnieć, że pierwszym parametrem funkcji $().parallax(); jest obiekt z ustawieniami pluginu, a kolejne parametry odnoszą się już bezpośrednio do każdej warstwy z osobna. Polecam zajrzeć do dokumentacji pluginu.
Efekt na stronie z Transformers został usprawniony o wykorzystanie animacji wspomaganych sprzętowo, czego w demie pluginu nie ma. Dzięki temu animacja jest płynniejsza i nie zacina się w przeglądarkach (wykorzystano własności: transform: translate3d(0, 0, 0) oraz transform-style: preserve-3d; - przemieszczenia są wyliczane na bieżąco i ich wartości są umieszczane we własności transform: translate3d();).

Podsumowanie

Od jakiegoś czasu nie mam już zwyczaju opisywać pluginów jQuery do osiągania zamierzonych efektów, ale na prośbę czytelnika postarałem się nieco przybliżyć tematykę związaną z danym efektem i mam nadzieję, że udało mi się to wyjaśnić wystarczająco.

Efekt parallax jest bardzo ciekawym wizualnie efektem, ale jego największą siłą są dobrze spasowane zdjęcia, które można wstawić jako tło do warstw które mają się przemieszczać.

Zdjęcie tytułowe pochodzi ze strony: http://www.transformersfilm.pl