jQuery plugins - zLayer
ápr 02

zLayer

Parallaxis plugin

Verzió: 0.3 beta
Kiadás dátuma: 2011/09/01
Fejlesztő: Devin R. Olsen
Liszensz: nincs adat
  • 1594
  • 9298
  • 0
  • -

Bevezető

Mi az a parallaxis? Valószínűleg kevesen ismerik a kifejezést, holott magával a jelenséggel (legalábbis honlapokkal kapcsolatban) már lehet többször is találkoztak, mivel egy ideje igen felkapott effekt lett. Leginkább számítógépes játékok, filmek, esetleg kisgyerekeknek szóló honlapokon futhatunk bele hasonló megoldásokba. Segítségével egyfajta térbeli hatást érhetünk el egy képen - ami csak látszatra tűnik egyetlen képnek, valójában egymás fölé helyezett képek csoportja.

És ezzel össze is foglaltuk, mi jelentősége van a pluginnak: igazából nem túl sok. Mindazonáltal úgy gondolom, bizonyos esetekben mégis hasznos lehet, mert segítségével feldobhatjuk a honlapunkat, adhatunk neki egy kis dinamizmust, játékosságot - gondolok itt például a kisgyerekeknek szóló honlapokra.

A fejlesztő oldalán jelenleg csak a 0.2-es verzió van ismertetve, azonban a letöltési lehetőségeknél megbújik egy 0.3 beta verzió is, amely plusz funkciókkal gyarapodott easing effekt támogatással. Mivel maga a fejlesztő (még) nem demonstrálta az új beta lehetőségeit, ezért itt most ezt a verziót nézzük meg.

(Wikipédia: Parallaxis)

Implementálás

CSS

            <link rel="stylesheet" type="text/css" href="css/style.css" />
          

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
            <script type="text/javascript" src="js/jquery.zlayer.full.js"></script>
          

Deklaráció

            $(document).ready(function(){
              $('#egy-elem').zlayer();
            });
          

Használat

Mint a bevezetőben említettem, a plugin több kép egymásra helyezésével és egymáshoz viszonyított eltérő mértékű elmozdításával éri el a térbeli hatást. Azonban fontos tudni, hogy ezek a képek áttetsző, transzparens .png-k, így ezek előállításához szükségeltetik valamilyen grafikai program ismerete is.

Ha a szükséges képek rendelkezésre állnak, az alábbi példához hasonlóan ágyazzuk be őket az oldalunkba:

            <div id="pelda">
              <img src="background.jpg" class="background" width="" height="" alt="" />
              <img src="image1.jpg" class="item1" width="" height="" alt="" />
              <img src="image2.jpg" class="item2" width="" height="" alt="" />
              <img src="image3.jpg" class="item3" width="" height="" alt="" />
              ...
            </div>
          

Ezt követően a hátteret a .background, míg az egyes elemeket az .item1, .item2, illetve .item3 szelektorok révén tudjuk a deklarációban egyéni viselkedéssel felruházni.

Teljes paraméterlista

  • canvas: a konténer elem (vagy ha úgy szebb, a háttér elem) CSS szelektora
    (alapértelmezett: document)
  • confine: az elmozdulás testreszabása. Ha a paramétert üresen hagyjuk, akkor mind a vertikális, mind a horizontális elmozdulás is engedélyezett, azonban az X és Y értékek segítségével ezt csak az egyik, illetve csak a másik irányra is korlátozhatjuk. ('' | 'x' | 'y') (alapértelmezett: '')
  • force: push érték esetén az egérmutatótól úgymond "eltolja" az egyes elemeket, míg pull érték esetén az egérmutató irányába "húzza" őket. ('push' | 'pull') (alapértelmezett: 'push')
  • mass: az elmozdulás mértéke - az érték minél kisebb, annál nagyobb az elmozdulás mértéke (alapértelmezett: 10)

A bevezetőben említett, a 0.3 beta-ban megjelent új funkciók:

  • ease: a paraméter segítségével az egyes elemekhez easing effektet rendelhetünk, illetve beállíthatjuk annak sebességét.
    Példa:
                      $('#egy-elem').zlayer({
                        ease: {
                          rate: 700,
                          method: 'easeOutQuad'
                        }
                      });
                  
  • rest: amikor az egeret lehúzzuk az interaktív területről, akkor a képek nem az éppen aktuális pozíciójukban maradnak, hanem visszaugranak eredeti, kiinduló állapotukba. A rest paraméter segítségével beállíthatjuk a visszaugráshoz használt easing animáció típusát, illetve annak sebességét.
    Példa:
                      $('#egy-elem').zlayer({
                        rest: {
                          rate: 700,
                          method: 'easeOutQuad'
                        }
                      });