Script animáció görgetés közben - Blog újjáéledt (agyi)
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.
