jQuery plugins - jQuery Transit
szept 04

jQuery Transit

CSS3 animációk egyszerűen

Verzió: 0.1.3
Kiadás dátuma: 2011
Fejlesztő: Rico Sta. Cruz
Liszensz: MIT

Bevezető

Nem is olyan régen, ha webodalak kapcsán az animáció került szóba, akkor az egyenlő volt a Flash fogalmával. Szerencsére azóta sokat fejlődött a világ és a kisebb animációk esetén kijelenthető, hogy van élet a Flash után!

A jQuery Transit plugin segítségével CSS3 transzformációkat/átmeneteket hozhatunk létre viszonylag egyszerűen és gyorsan, mindezt jQuery easing támogatással.

Kompatibilitás:

  • Firefox 4+
  • Safari 5+
  • IE 10+
  • Chrome 10+
  • Opera 11+
  • Mobile Safari

Implementálás

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.transit.min.js"></script>
          

Deklaráció

            $(document).ready(function(){
              $('#pelda').transition({ ... });
            });
          

Teljes paraméterlista

  • x: horizontális mozgatás mértéke képpontban
  • y: vertikális mozgatás mértéke képpontban
  • scale: nyújtás mértéke százalékos formában
  • rotate: elforgatás mértéke fokban (deg)
  • rotateX: X tengely menti 3D-s forgatás mértéke fokban
  • rotateY: Y tengely menti 3D-s forgatás mértéke fokban
  • rotate3d: 3D-s forgatás (x, y, z, fok)
  • perspective: perspektivikus hatás (képpont)
  • skewX: horizontális nyújtás mértéke fokban
  • skewY: vertikális nyújtás mértéke fokban
  • delay: késleltetés milliszekundumban
  • easing: az animáció típusa
  • duration: az animáció sebessége/időtartama milliszekundumban

Tippek

  • A transzformációk során az abszolút értékeken kívül relatív értékek is megadhatók:
                    $('#pelda').transition({ x: '+=30', rotate: '+=30deg' });