Elementy strony czułe na ruchy kursora – Parallax


13 maja 2011 / Michał Kortas


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.

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.

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.

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



3 odpowiedzi na “Elementy strony czułe na ruchy kursora – Parallax”

  1. Muq pisze:

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

  2. waldi pisze:

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

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *