WOW.js este o mică bibliotecă care vă permite să activați animația la o anumită etapă a derulării paginii. Acesta cântărește foarte puțin și, pe lângă aceasta, este complet independent - adică nu este nevoie să conectați jQuery sau alți monștri.
Animate.CSS este un script care este direct responsabil pentru animația însăși. De fapt, wow.js are animație din acest lucru.
Cum se descarcă și se conectează.
1 pas. Pentru muncă trebuie să descărcați scripturile wow.js și animate.css
2 pas. Conectați scripturile
Eticheta de script trebuie să fie adăugată întotdeauna la sfârșitul corpului. Acest lucru se face pentru a încărca rapid pagina. De fiecare dată când browserul atinge eticheta de script, încărcarea și redarea întregului site este înghețat până când scriptul este încărcat. Din aceasta vedem adesea site-uri care pentru o lungă perioadă de timp sunt doar o foaie albă. Și, de asemenea, dacă scriptul este plasat la capătul corpului, aveți o garanție că corpul este gata și scenariul va funcționa exact.
Pasul 3. Trebuie să inițializați scriptul adăugând acest cod, imediat după conectare:
Aceasta încheie legătura și este timpul pentru a doua etapă.
Utilizarea WOW.js
Pasul 1. Selectați elementul pe care doriți să îl animați și adăugați clase de clasă = "wow" la acesta. În codul de mai jos, am arătat acest lucru în imaginea de exemplu:
Pasul 2. Selectați animația și adăugați o clasă suplimentară în imaginea noastră:
Pasul 3 (opțional). Adăugați setări pentru animație dacă este necesar, utilizând atribute de date speciale:
În codul de mai sus, am indicat că animația ar trebui să se declanșeze când imaginea este de 200 de pixeli din partea de jos a ecranului. Dar, în același timp, va avea o întârziere de o jumătate de secundă, iar animația însăși va dura exact 2 secunde până la finalizare.
WOW.js setările de animație prin atribute
data-wow-duration - specifică timpul de redare a animației
data-wow-delay - setați întârzierea înainte de a juca animația
data-wow-offset - porniți animația atunci când elementul trece un anumit număr de pixeli din partea de jos a ecranului
data-wow-iteration - numărul de repetări a unei animații
Vă atrag atenția asupra faptului că aceste atribute nu sunt obligatorii. Dacă nu le specificați, animația va fi pur și simplu redată implicit, de îndată ce elementul apare pe ecran atunci când defilați fereastra browserului.
Trimiteți-le prietenilor: