Script animáció görgetés közben - Blog újjáéledt (agyi)

Tanuljuk animálni tárgyak könnyen és gyorsan, a két írás. A név, amit fent látható, a cím ezt a cikket. De az elején, hadd mondjam el, amit mindegyik.

WOW.js - egy kis könyvtár, amely lehetővé teszi többek között az animációk egy bizonyos szakaszában az oldal tekercset. Súlya nagyon kevés, és különben is teljesen függetlenül - azaz nem kell csatlakoztatni jQuery vagy más szörnyek.

Animate.CSS - script, ami közvetlenül felelős az animáció is. Valójában wow.js animáció veszi ki ez a dolog.

Hogyan lehet letölteni és csatlakozzon.

1 lépés. A munka meg kell, hogy töltse le a szkriptek és wow.js animate.css

2. lépés. Hook szkriptek

Kódcímke mindig hozzá kell adni a végén a szervezetben. Ez úgy történik, hogy gyorsítsa oldal betöltési idő. Minden alkalommal, amikor a böngésző eléri a script tag, rakodási és teszi a teljes webhely lefagyott, amíg a script van betöltve. Ebből gyakran látni oldalak, amelyek már régóta fehér lapot. És azt is, ha a szkript a végén a test, akkor a garancia arra, hogy a szervezet - készen áll, és a forgatókönyv fog működni pontosan.

3. lépés: Meg kell inicializálja a script hozzá a következő kódot itt, közvetlenül azután, hogy össze van kötve:

Ebben az összefüggésben véget ér, és eljött az ideje a második fázisban.

használata WOW.js

1. lépés: Válassza ki a kívánt elemet animálni, és add meg a class class = „wow”. Az alábbi kódot, már látható a példa a képet:

2. lépés: Válassza ki az animációt, és hozzá, hogy a további osztály kép:

3. lépés (opcionális). Add beállításokat animáció, ha szükséges, speciális adat attribútumok:

A fenti kód, akkor adja meg, hogy az animáció működésbe kell hozni, ha a kép kerül 200 pixel a képernyő alján. De ugyanakkor ez lesz késéssel fél másodperc, és ő animáció időt vesz igénybe, hogy pontosan 2 másodpercig.

Beállítások WOW.js animáció révén attribútumok

data-wow-duration - adja meg, mikor játszik animáció

data-wow-késleltetés - a késedelem a lejátszás előtt animáció

data-wow-offset - integráció animáció, amikor az elem átmegy opredelnie pixelek száma a képernyő alján

data-wow-iteráció - a számos animációs visszajátszások

Felhívom a figyelmet arra, hogy ezek az attribútumok nem kötelezőek. Ha nem adja meg, az animáció játszott csak alapértelmezés szerint, amint az elem jelenik meg a képernyőn, ha görgetni a böngésző ablakot.