JavaScript

Elementy strony czułe na ruchy kursora – Parallax

W dzisiejszym poradniku dowiecie się jak wykonać bardzo ciekawy efekt zwany jQuery Parallax. Dzięki niemu, ustalone przez nas elementy naszej witryny, będą przemieszczać się podczas przemieszczania kursora w oknie przeglądarki, przeciwnie do wykonywanych ruchów. Rozwiązanie takie jest obecnie coraz częściej wykorzystywane i zyskuje na popularności. Skrypt nie jest trudny, więc każdy poradzi sobie z nim bez problemu.

Wszystko pokażę na przykładzie 3 obrazków. Na końcu artykułu podałem link, z którego pobierzesz potrzebne pliki źródłowe. A teraz do pracy!

Na samym początku zaimportujmy bibliotekę jQuery i pozostałe skrypty niezbędne do działania jQuery Parallax. Robimy to w sekcji HEAD.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jparallax.js"></script>
<script type="text/javascript" src="par.js"></script>

W ramach BODY umieszczamy div#kontener (aby wycentrować nasze zdjęcia do środka strony), a w nim div#parallax – wewnątrz tego bloku znajdować się będą obrazki, tekst i inne elementy, które mamy zamiar wprowadzić w ruch.

<div id="kontener">
<div id="parallax">
<div class="par-1"><img src="images/001.jpg" /></div>
<div class="par-2"><img src="images/002.jpg" /></div>
<div class="par-3"><img src="images/003.jpg" /></div>
</div>
</div>

Na koniec pozostaje nam formatowanie CSS. Najważniejszym elementem jest nadanie identyfikatorowi #parallax następujących argumentów: position (relative) i overflow (hidden). Dodatkowo powinniśmy ustawić wymiary width i height. Należy pamiętać, aby elementy przeznaczone do wstawienia do div#parallax muszą mieć większe rozmiary niż sam #parallax. Jeśli nadamy mu wymiary 500×500[px], div’owi w jego wnętrzu przypiszmy np. 600×600[px]. Im wymiary bardziej zbliżone do bloku nadrzędnego (#parallax) tym wykonane zostanie mniejsze przesunięcie, po ruchu kursorem.

#kontener {width: 800px; margin: 0 auto;}
#parallax {position: relative; overflow: hidden; width:800px; height:800px;}
.par-1 {width: 850px; height: 850px;}
.par-1 img {position: absolute; top: 40px; left: 50px;}
.par-2 {width: 890px; height: 890px;}
.par-2 img {position: absolute; top: 240px; left: 250px;}
.par-3 {width: 900px; height: 900px;}
.par-3 img {position: absolute; top: 440px; left: 450px;}

Aby lepiej zrozumieć działanie skryptu zobacz >> DEMO jQuery Parallax
Pliki źródłowe do pobrania >> jQuery Parallax

komentarze 3

  • Awatar
    Muq

    16 maja 2014 11:05

    Chyba coś spieprzyłeś wklejając kod : D

    Odpowiedz
  • Awatar
    waldi

    17 października 2014 13:17

    da się to zmodyfikowac aby lekko rotowało w prawo przy ruchu myszą w lewo i odwrotnie?

    Odpowiedz

Zostaw odpowiedź