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.
1 2 3 | <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.
1 2 3 4 5 6 7 | <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.
1 2 3 4 5 6 7 8 | #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
Chyba coś spieprzyłeś wklejając kod : D
To „kwiatki” po przejściu z Joomla na WordPress.
da się to zmodyfikowac aby lekko rotowało w prawo przy ruchu myszą w lewo i odwrotnie?