jParallax 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
