Biblioteka jparallax

diagramjParallax manipuluje węzłami z warstwami, które poruszają się wraz z ruchami myszy. Prędkość ruchu zależy od wielkości danej warstwy.
Dzięki stylom CSS można sprawić, aby warstwy swobodnie się poruszały lub też pozostawały w miejscu.
Grafika po prawej obrazuje układ warstw.

Instalacja

jQuery( '.parallax-layer' ).parallax( options );

Efekty jakie uzyskamy dzięki jParallax?

<ul>
<li class="parallax-layer"></li>
<li class="parallax-layer"></li>
</ul>

Przykład:


Gdy przesuwamy mysz od lewej strony do prawej wówczas grafiki umieszczone na poszczególnych warstwach przemieszczają się z prawej strony do lewej.

Aby korzystać z efektów jaki daje nam jParallax należy przygotować grafiki w różnych rozmiarach korzystając również z pomocy CSS.

Dlatego najprostszym sposobem korzystania jParallax jest, aby warstwy różnych rozmiarach za pomocą CSS. Warstwy o rozmiarze większym poruszają się szybciej niż te o mniejszym rozmiarze.

Istnieją różne sposoby, aby wprowadzić style dla  jParallax. Całość powinien otaczać kontener div  z klasą"parallax-viewportt" tak jak w powyższym przykładzie.

.parallax-viewport
      { position:relative; overflow:hidden; width:npx; height:npx; }

Poszczególne elementy graficzne natomiast umieszczamy  w elemencie <img ... / > z klasą "parallax-layer"

.parallax-layer
      { position:absolute; }

Dzięki temu, że div o klasie "parallax-viewport" ma pozycjonowanie "position: relative" warstwy z grafikami są względem nie pozycjonowane. Własność "overflow: hidden" pozostawia widocznym te elementy grafiki, które mieszczą się w div'e "parallax-viewport".

Zachowaniem poszczególnych warstw możemy też sterować dzięki dodatkowym opcjom:

Opcje:

Option Type Default
mouseport selector string | jQuery object jQuery(document)
Id węzła (kontenera) gdzie umieszczone są grafiki. np.: "#port"
xparallax boolean | 0-1 | 'n%' | 'npx' true
yparallax boolean | 0-1 | 'n%' | 'npx' true
Ruch w kierunku osi y można zablokować wpisując "false". zakres ruchu warstw ustawiamy wpisując wartości od 0 - 1, procentow: 0% do 100% lub przy pomocy wartości w px
xorigin 0-1 | 'n%' | 'left', 'center', 'middle', 'right' 0.5
yorigin 0-1 | 'n%' | 'top', 'center', 'middle'. 'bottom' 0.5
freezeClass string 'freeze'
Class set on a layer when it is frozen.
decay 0-1 0.66
Tempo z jakim warstwa podąża za ruchem myszy. 0 bez opóźnień, 1- warstwa jest nieruchoma.
frameDuration int (milliseconds) 30
Czas pomiędzy klatkami animacji w milisekundach.
width int (px) undefined
height int (px) undefined
Wartości dla szerokości i wysokości danej warstwy. Standardowo te wartości są odczytywane z css

 

źródło: http://stephband.info/jparallax/
inne przykłady: http://blog.strefakursow.pl/tutoriale-css3.html