Animați exemple CSS. Nouă exemple simple de animație CSS3

Cel mai simplu exemplu de utilizare a acestei combinații poate fi văzut chiar mai jos pe această pagină. Cel mai interesant lucru este că această frumusețe (animație de defilare) funcționează FĂRĂ jQuery. Se pare că toate ușile sunt deschise pentru acest scenariu... Și, ca exemplu, derulați în jos... Fiți îndrăzneț...

Vă pot spune cu încredere că acum animația cu defilare devine FOARTE populară și de multe ori puteți găsi acest efect pe site-urile de vânzare ale antreprenorilor de succes pe Internet. Asemenea „smecherii” însuflețește FOARTE site-urile și, de asemenea, ajută la concentrarea atenției vizitatorului asupra acestora puncte importante, pe care vrei să fii observat mai întâi.

Animație de defilare: combinație
„WOW.js” și „Animate.css”
pe WordPress...

* pentru a repeta animația, reîncărcați pagina.

Cum se configurează?

PASUL 1
Pentru a începe, descărcați aceste două fișiere („WOW.js” și „Animate.css”)

ACTUALIZAT (25 iulie 2019):
wow.min.js v1.2.1 | animate.min.css v3.7.2
PASUL 2
Plasați folderul „wow-animation” în folderul rădăcină al site-ului. Desigur, îl puteți plasa oriunde, atâta timp cât specificați calea corectă către fișiere. Este totuși recomandabil să plasați acest folder în folderul rădăcină: index.html. Dacă este WordPress, atunci plasați folderul oriunde doriți. (principalul este să indicați calea corectă către aceasta).

PASUL 3
Punem in aceasta linie:

* Desigur, indicăm calea corectă către fișier. Dacă instalați pe WordPress, vă recomand să specificați calea plină, adică începând cu httpS://YourDomain etc. Pentru a verifica dacă ați conectat corect fișierul, copiați adresa URL, introduceți-o în bara de adrese și apăsați Enter. Dacă se deschide un fișier cu cod de neînțeles, atunci totul este ok :)

PASUL 4
Plasați aceste rânduri în partea de jos a paginii:

nou WOW().init();

* De asemenea, specificați calea corectă către fișier și verificați în browser.

Anumite informatii

PASUL 6
Setări avansate. Adăugarea de caracteristici:
data-wow-duration : Schimbați durata animației;
data-wow-delay : Întârziere înainte de începerea animației;
data-wow-offset : Distanța înainte de începerea animației (față de partea de jos a ferestrei browser);
data-wow-iteration : Repetați animația „de atâtea ori”.

Anumite informații Anumite informații

Buna ziua. Permiteți-mi să vă reamintesc că am scris deja despre asta, dar acestea au fost doar principii de bază. Acum vă sugerez să vă familiarizați cu un set gata făcut de proprietăți de animație într-un fișier animate.css. Acesta nu este un generator, ci o bibliotecă care funcționează destul de corect în toate browserele populare. Și poți să te uiți la aceste exemple.

Se conectează Animate.css

Daca vrei sa faci Animație CSS imagini, text sau butoane pentru site și implementați toate acestea fără a folosi Javascript, atunci trebuie doar să conectați un fișier, care a fost deja menționat mai sus, într-un mod standard, adică între etichetele head.

Acesta este modul în care sunt specificate proprietățile de animație ale obiectelor. , animat este necesar, iar tada este unul dintre efecte. Dar avem nevoie de ciclul în sine și acum o vom face. Acest lucru se poate face prin crearea unei noi clase și atribuirea de proprietăți speciale acesteia sau uneia existente.

Animație în buclă Animate.css

.nou (animație-iterație-număr: infinit ; )

Nou(animație-iterație-număr: infinit;)

Și pentru a vă fi și mai clar ceea ce încercam să explic aici, urmăriți acest videoclip, unde vă demonstrez clar cu un exemplu real cum funcționează și, de asemenea, descărcați stilurile în sine.

Din ce în ce mai mult, pe multe pagini de destinație sau pagini promoționale, puteți găsi diverse efecte de animație. La urma urmei, fac pagina mai interesantă și mai atractivă.

Practic, aceste efecte sunt setate fie pe un anumit eveniment (dați clic sau treceți cu mouse-ul pe un element), fie în momentul derulării paginii. Cred că ați întâlnit astfel de site-uri când, în timp ce derulați o pagină, diverse elemente apar lin și frumos.

Anterior, pentru a implementa aceste efecte, trebuia să folosești doar JS, dar dezvoltarea nu stă pe loc și odată cu lansarea CSS3, toate aceste efecte pot fi implementate pe acesta.

În această lecție vă vom prezenta un instrument foarte interesant numit animate.css. Aceasta este o foaie de stil CSS gata făcută, care are peste 50 de efecte diferite în arsenalul său și toate aceste efecte sunt implementate în CSS3.

Pentru a-l folosi, trebuie doar să setați o anumită clasă pentru elementul necesar și un efect de animație va fi aplicat acestui element. După cum am spus mai devreme, această animație este implementată în CSS3, astfel încât aceste efecte vor funcționa în toate browserele moderne.

Acum să aruncăm o privire mai atentă la animate.css.

Markup HTML de bază

Urmărește tutorialul video

• sări
• flash
• puls
• banda de cauciuc
• se agită
• leagăn
• se clătina
• bounceIn
• bounceInDown
• bounceInLeft
• bounceInRight
• bounceInUp
• bounceOut
• bounceOutDown
• bounceOutLeft
• bounceOutRight
• bounceOutUp
• fadeIn
• fadeInDown
• fadeInDownBig
• fadeInLeft
• fadeInLeftBig
• fadeInRight
• fadeInRightBig
• fadeInUp
• fadeInUpBig
• fadeOut
• fadeOutDown
• fadeOutDownBig
• fadeOutLeft
• fadeOutLeftBig
• fadeOutRight
• fadeOutRightBig
• fadeOutUp
• fadeOutUpBig
• flipInX
• flipInY
• flipOutX
• flipOutY
• lightSpeedIn
• lightSpeedOut
• rotateIn
• rotiți în jos la stânga
• rotateInDownRight
• rotateInUpLeft
• rotateInUpRight
• rotateOut
• rotițiOutDownLeft
• rotițiOutDownDreapta
• rotițiOutUpLeft
• rotateOutUpRight
• balama
• rollIn
• rola
• măriți
• zoomInDown
• zoomInStânga
• zoomInRight
• zoomInUp
• micșorare
• zoom OutDown
• zoomOutStânga
• zoomOutDreapta
• zoomOutUp
• slideInDown
• slideInLeft
• slideInRight
• slideInUp
• slideOutDown
• slideOutLeft
• slideOutRight
• slideOutUp

Animație fără sfârșit

Dacă ați făcut totul așa cum este descris mai sus, atunci când pagina se încarcă, acest efect va fi aplicat elementului și gata, animația se va termina acolo.

Dar dacă aveți nevoie ca animația să continue fără oprire?

Pentru a face acest lucru, trebuie doar să adăugați o altă clasă pentru elementul nostru animat. Această clasă este infinită.

Titlu

Setați animația când treceți mouse-ul peste un element

Urmărește tutorialul video

Toate exemplele descrise anterior setează animația imediat după încărcarea paginii, dar în practică acest lucru este rareori necesar. În practică, de foarte multe ori este necesar să setați o animație atunci când treceți cu mouse-ul peste un element și, prin urmare, mai jos am furnizat codul gata făcut pentru această implementare.

HTML

Marcajul nostru HTML s-a schimbat puțin, acum nu trebuie să specificăm o clasă care este responsabilă pentru o anumită animație. Trebuie să specificăm această valoare în atributul special data-effect. Vă rugăm să acordați atenție acestui lucru, este foarte important.

Titlu

Iată un mic cod jQuery care va monitoriza evenimentul mouseover și dacă acest eveniment are loc, scriptul îi va adăuga o clasă, a cărei valoare este specificată în atributul data-effect. Prin adăugarea acestei clase, se va aplica animația.

Funcția animate(elem)( efect var = elem.data(„efect”); if(!efect || elem.hasClass(efect)) returnează false; elem.addClass(efect); setTimeout(funcție())( elem. removeClass (efect); 1000); $(".animated").mouseenter(function() ( animate($(this)); ));

Desigur, puteți schimba acest script după cum doriți, de exemplu, puteți schimba evenimentul mouse-enter pentru a face clic în el. Apoi, în acest caz, animația nu va avea loc în momentul în care mouse-ul trece peste element, ci în momentul clicului.

Realizarea de animație la derularea paginii

Urmărește tutorialul video

Și, în sfârșit, să ne uităm la un alt exemplu în care puteți utiliza cu ușurință animate.css.

Și anume, puteți seta diferite efecte pentru elemente atunci când derulați pagina. În aceste scopuri, pe lângă animate.css, vom avea nevoie și de un script wow.js special.

Animația CSS3 face site-urile web dinamice. Dă viață paginilor web, îmbunătățind experiența utilizatorului. Spre deosebire de tranzițiile CSS3, crearea animației se bazează pe cadre cheie, care vă permit să redați și să repetați automat efectele pentru un anumit timp, precum și să opriți animația într-o buclă.

Animația CSS3 poate fi folosită pentru aproape toate elementele html, precum și pentru pseudoelementele:before și:after. Lista proprietăților animate este dată pe pagină. Când creați animație, nu uitați de posibile probleme cu performanță, deoarece modificarea unor proprietăți necesită o mulțime de resurse.

Introducere în animația CSS Suport pentru browser

IE: 10,0
Firefox: 16.0, 5.0 -moz-
Chrome: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Opera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: -
Browser Android: 44, 4.1 -webkit-
Chrome pentru Android: 44

1. Cadre cheie

Cadrele cheie sunt folosite pentru a specifica valorile proprietăților animației în diferite puncte ale animației. Cadrele cheie definesc comportamentul unui ciclu de animație; animația se poate repeta de zero sau de mai multe ori.

Cadrele cheie sunt specificate folosind regula @keyframes, definită după cum urmează:

numele animației @keyframes (lista de reguli)

Crearea unei animații începe prin a seta cadrele cheie ale regulii @keyframes. Cadrele determină ce proprietăți vor fi animate la ce pas. Fiecare cadru poate include unul sau mai multe blocuri de declarații ale uneia sau mai multor perechi de proprietăți și valori. Regula @keyframes conține numele animației elementului, care leagă regula și blocul de declarare al elementului.

@keyframes shadow (de la (text-shadow: 0 0 3px black;) 50% (text-shadow: 0 0 30px black;) la (text-shadow: 0 0 3px black;) )

Cadrele cheie sunt create folosind cuvintele cheie de la și către (echivalentul valorilor 0% și 100%) sau folosind puncte procentuale, care pot fi specificate câte doriți. De asemenea, puteți combina cuvinte cheie și puncte procentuale. Dacă cadrele au aceleași proprietăți și valori, acestea pot fi combinate într-o singură declarație:

@keyframes muta ( de la, la ( sus: 0; stânga: 0; ) 25%, 75% (sus: 100%;) 50% (sus: 50%;) )

Dacă nu sunt specificate cadre 0% sau 100%, atunci browserul utilizatorului le creează folosind valorile calculate (setate inițial) ale proprietății animate.

Dacă sunt definite mai multe reguli @keyframes cu același nume, ultima din ordinea documentului se va declanșa și toate cele anterioare vor fi ignorate.

Odată ce regula @keyframes este declarată, o putem face referire în proprietatea animație:

H1 (dimensiunea fontului: 3.5em; culoare: magenta închis; animație: umbră 2s ușurință infinită de intrare; )

Nu este recomandat să animați valori non-numerice (cu rare excepții), deoarece rezultatul în browser poate fi imprevizibil. De asemenea, nu ar trebui să creați cadre cheie pentru valorile proprietăților care nu au un punct de mijloc, cum ar fi culoarea: roz și culoarea: #ffffff , lățime: automată și lățime: 100px sau raza de margine: 0 și raza de margine: 50% ( în acest caz, ar fi corect să specificați raza de frontieră: 0%).

1.1. Funcție de sincronizare pentru cadre cheie

O regulă de stil de cadru cheie poate declara și o funcție temporară care ar trebui utilizată atunci când animația trece la următorul cadru cheie.

Exemplu

@keyframes bounce ( de la ( sus: 100px; animation-timing-function: ease-out; ) 25% (sus: 50px; animation-timing-function: ease-in; ) 50% (sus: 100px; animation-timing- funcția: ease-out; 75% (sus: 75px; animație-timing-funcție: ease-in; ) la (sus: 100px; ) )

Sunt specificate cinci cadre cheie pentru animația numită „bounce”. Între primul și al doilea cadru cheie (adică între 0% și 25%), este utilizată funcția de relaxare. Între al doilea și al treilea cadru cheie (adică între 25% și 50%), este utilizată funcția de accelerare lină. Și așa mai departe. Elementul se va deplasa în sus pe pagină cu 50 px, încetinind pe măsură ce ajunge punctul cel mai înalt, iar apoi se accelerează pe măsură ce scade la 100 px . A doua jumătate a animației se comportă în mod similar, dar mută elementul doar 25 px în sus pe pagină.

Funcția de sincronizare specificată în cadrul cheie to sau 100% este ignorată.

2. Nume animație: proprietatea animație-name

Proprietatea animation-name specifică lista de animații aplicate elementului. Fiecare nume este folosit pentru a selecta un cadru cheie într-o regulă care oferă valori de proprietate pentru animație. Dacă numele nu se potrivește cu niciun cadru cheie din regulă, nu există proprietăți de animat sau nu există un nume de animație, animația nu se va executa.

Dacă mai multe animații încearcă să schimbe aceeași proprietate, se va executa animația cea mai apropiată de sfârșitul listei de nume.

Numele animației face distincție între majuscule și minuscule și nu este permis. cuvânt cheie nici unul . Este recomandat să folosiți un nume care să reflecte esența animației și puteți utiliza unul sau mai multe cuvinte enumerate cu o cratimă - sau caracterul de subliniere _ .

Proprietatea nu este moștenită.

Sintaxă

Nume animație: niciunul; animatie-nume: test-01; animatie-nume: -glisare; animație-nume: mișcare-vertical; animatie-nume: test2; animatie-name: test3, move4; animatie-nume: initiala; animatie-nume: mostenire;

3. Durata animației: proprietatea animație-durată

Proprietatea animație-durată determină durata unui ciclu de animație. Specificat în secunde s sau milisecunde ms. Dacă pentru un element sunt specificate mai multe animații, puteți seta timpuri diferite pentru fiecare, listând valorile separate prin virgule.

Proprietatea nu este moștenită.

Sintaxă

Animație-durată: .5s; animatie-durata: 200ms; animatie-durata: 2s, 10s; animatie-durata: 15s, 30s, 200ms;

4. Funcția de sincronizare: proprietatea animație-timing-funcție

Proprietatea animation-timing-function descrie modul în care animația va progresa între fiecare pereche de cadre cheie. În timpul întârzierii animației, funcțiile de sincronizare nu sunt aplicate.

Proprietatea nu este moștenită.

animatie-functie-sincronizareFuncțiile Bezierfuncții de pas

Valori:
liniar	Funcție liniară, animația are loc uniform pe tot parcursul timpului, fără fluctuații de viteză.
uşura	Caracteristica implicită, animația începe lent, accelerează rapid și încetinește la sfârșit. Corespunde cubic-bezier(0,25,0,1,0,25,1) .
ușurință	Animația începe lent și apoi se accelerează ușor la sfârșit. Corespunde cubic-bezier(0,42,0,1,1) .
uşurare	Animația începe rapid și încetinește ușor la sfârșit. Corespunde cubic-bezier(0,0,0.58,1) .
ușurință-in-out	Animația începe încet și se termină încet. Corespunde cubic-bezier(0,42,0,0,58,1) .
cubic-bezier(x1, y1, x2, y2)	Vă permite să setați manual valori de la 0 la 1. Puteți construi orice traiectorie a vitezei de schimbare a animației.
pas-start	Setează animația pas cu pas, împărțind animația în segmente, modificările apar la începutul fiecărui pas. Evaluat în pași (1, start) .
sfârşitul pasului	Animație pas cu pas, modificările apar la sfârșitul fiecărui pas. Evaluat în pași (1, final) .
pași (număr de pași, poziție pas)	O funcție de timp de pas care ia doi parametri. Primul parametru specifică numărul de intervale din funcție. Acesta trebuie să fie un număr întreg pozitiv mai mare decât 0, cu excepția cazului în care al doilea argument este jump-none, caz în care trebuie să fie un număr întreg pozitiv mai mare decât 1. Al doilea parametru, care este opțional, specifică poziția pasului - punctul în care începe animația, folosind una dintre următoarele valori: jump-start - primul pas are loc la o valoare de 0 jump-end - ultimul pas are loc cu o valoare de 1 jump-none - toți pașii apar în intervalul (0, 1) jump-both - primul pas are o valoare de 0, ultimul - cu o valoare de 1 start - se comportă ca un jump-start final - se comportă ca un jump-end Odată cu startul valorii, animația începe la începutul fiecărui pas, cu valoarea finală la sfârșitul fiecărui pas cu o întârziere. Latența se calculează împărțind timpul de animație la numărul de pași. Dacă al doilea parametru nu este specificat, se utilizează valoarea implicită end.
iniţială
moşteni

Sintaxă

Animație-sincronizare-funcție: ușurință; animație-funcție de sincronizare: ease-in; animație-funcție de sincronizare: ease-out; animație-funcție de sincronizare: ease-in-out; animatie-functie de sincronizare: liniar; animație-funcție-temporizare: step-start; animatie-functie-timing: pas-sfarsit; animație-funcție de sincronizare: cubic-bezier(0.1, 0.7, 1.0, 0.1); animație-funcție de sincronizare: pași(4, final); animație-funcție de sincronizare: ease, step-start, cubic-bezier (0.1, 0.7, 1.0, 0.1); animatie-functie-timing: initial; animatie-functie de sincronizare: mostenire;

Animația pas cu pas poate fi folosită pentru a crea efecte interesante, cum ar fi textul imprimat sau un indicator de încărcare.

5. Repetiția animației: proprietatea animație-iterație-număr

Proprietatea animation-iteration-count specifică de câte ori este redată bucla de animație. O valoare de pornire de 1 înseamnă că animația se va reda de la început până la sfârșit o dată. Această proprietate este adesea folosită împreună cu valoarea alternativă a proprietății animație-direcție, ceea ce face ca animația să fie redată în ordine inversăîn cicluri alternative.

Proprietatea nu este moștenită.

Sintaxă

Animație-iterație-număr: infinit; animație-număr-iterație: 3; animație-număr-iterație: 2,5; animație-iterație-număr: 2, 0, infinit;

6. Direcția animației: proprietatea direcției animației

Proprietatea animație-direcție determină dacă animația ar trebui să fie redată în ordine inversă pe unele sau pe toate buclele. Când animația este redată în ordine inversă, funcțiile de sincronizare sunt de asemenea inversate. De exemplu, atunci când este redată în ordine inversă, funcția ease-in se va comporta ca ease-out .

Proprietatea nu este moștenită.

regia-animatie

Valori:
normal	Toate animațiile se repetă după cum este specificat. Valoare implicită.
verso	Toate repetările animației sunt jucate în direcția opusă față de modul în care au fost definite.
alterna	Fiecare repetare impară a buclei de animație este redată în direcția normală, fiecare repetare pară este redată în direcția inversă.
alternativ-invers	Fiecare repetare impară a buclei de animație este redată în direcția inversă, fiecare repetare pară este redată în direcția normală.
iniţială	Setează valoarea proprietății la valoarea implicită.
moşteni	Moștenește valoarea proprietății de la elementul părinte.

Pentru a determina dacă o repetare a buclei de animație este pară sau impară, numărul de repetări începe de la 1.

Sintaxă

Animație-regie: normal; animație-direcție: invers; regie-animație: alternativă; animație-direcție: alternativ-revers; animație-direcție: normal, invers; animație-direcție: alternativă, inversă, normală; animatie-regia: initiala; animație-direcție: moștenire;

7. Redarea animației: proprietatea animation-play-state

Proprietatea animation-play-state determină dacă animația va începe sau va întrerupe. Oprirea animației într-o buclă este posibilă prin utilizarea acestei proprietăți într-un script JavaScript. De asemenea, puteți opri animația când treceți mouse-ul peste un obiect - state:hover .

Proprietatea nu este moștenită.

Sintaxă

Animație-play-stare: alergare; animație-play-stare: pauză; animație-play-stare: pauză, alergare, alergare; animatie-play-stare: initiala; animație-play-stare: moștenire;

8. Întârziere animație: proprietate animație-întârziere

Proprietatea animation-delay determină când va începe animația. Specificat în secunde s sau milisecunde ms.

Proprietatea nu este moștenită.

Sintaxă

Animație-întârziere: 5s; animație-întârziere: 3s, 10ms;

9. Starea elementului înainte și după redarea animației: proprietate animation-fill-mode

Proprietatea animation-fill-mode determină ce valori sunt aplicate de animație în afara timpului său de execuție. Când animația se termină, elementul revine la stilurile sale originale. În mod implicit, animația nu afectează valorile proprietăților atunci când animația este aplicată unui element - animation-name și animation-delay . În plus, în mod implicit, animațiile nu afectează valorile proprietăților animație-durată și animație-iterație-număr după ce sunt finalizate. Proprietatea animation-fill-mode poate suprascrie acest comportament.

Proprietatea nu este moștenită.

animație-umplere-mod

Valori:
nici unul	Valoare implicită. Starea elementului nu se schimbă înainte sau după redarea animației.
înainte	Odată ce animația se termină (după cum este determinată de valoarea animației-iterație-număr), animația va aplica valorile proprietăților în momentul în care se termină animația. Dacă animația-iterație-număr este mai mare decât zero, se aplică valorile pentru sfârșitul ultimei iterații finalizate a animației (nu valoarea pentru începutul iterației care urmează). Dacă animation-iteration-count este zero, valorile aplicate vor fi cele care pornesc prima iterație (la fel ca în animation-fill-mode: înapoi;).
înapoi	În perioada definită cu animation-delay, animația va aplica valorile proprietăților definite în cadrul cheie, care va începe prima iterație a animației. Acestea sunt fie valorile de la cadru-cheie (când direcția animație: normală sau direcția animației: alternativă), fie valorile cadru-cheie către valorile (când direcția animației: inversă sau direcția animației: alternativă).
ambele	Vă permite să lăsați un element în primul cadru cheie înainte de a începe animația (ignorând o valoare pozitivă de întârziere) și să întârziați ultimul cadru până la sfârșitul ultimei animații.

Sintaxă

Animation-fill-mode: niciunul; animation-fill-mode: înainte; animation-fill-mode: înapoi; animație-fill-mode: ambele; animation-fill-mode: niciunul, înapoi; animation-fill-mode: ambele, înainte, niciunul;

10. Scurtă descriere a animației: proprietatea animației

Toți parametrii de redare a animației pot fi combinați într-o singură proprietate - animație, listându-i separați printr-un spațiu:
animație: animație-nume animație-durată animație-funcție de sincronizare animație-întârziere animație-iterație-număr animație-direcție;

Pentru a reda animația, este suficient să specificați doar două proprietăți - animation-name și animation-duration , proprietățile rămase își vor lua valorile implicite. Ordinea în care sunt listate proprietățile nu contează, singurul lucru este că timpul de execuție al animației-durata trebuie să vină înainte de întârzierea animației-întârziere.

11. Animații multiple

Puteți seta mai multe animații pentru un element, listând numele lor separate prin virgule:

Div (animație: umbră 1s ease-in-out 0,5s alternativ, mutare 5s liniară 2s;)

Astăzi vom învăța cum să animam obiectele site-ului web ușor și rapid folosind două scripturi. Al cărui nume îl puteți vedea mai sus în titlul acestui articol. Dar mai întâi, să vă spun pentru ce este fiecare dintre ele.

WOW.js este o bibliotecă mică care vă permite să activați animația la o anumită etapă a derulării paginii. Cântărește foarte puțin și este, de asemenea, 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 în sine. De fapt, wow.js preia animații chiar din acest lucru. Și sunt câteva zeci de ele.

Dezavantajul animate.css este că este doar un set obișnuit de reguli CSS legate de animație. Adică sunt redate imediat după ce pagina este încărcată. Și dacă elementele animate nu sunt vizibile pe „primul” ecran, atunci vizitatorii pur și simplu nu vor vedea toată această frumusețe. La urma urmei, va fi redat înainte de a derula pagina în locul potrivit.

Și în prima notă (link în paragraful următor), pentru a preveni acest lucru, v-am arătat cum și unde să scrieți coduri js, astfel încât animația să se joace într-un anumit stadiu al derulării paginii. A fost extrem de incomod, dar a funcționat ca un farmec

Prin urmare, înainte de a începe, vă sfătuiesc să urmăriți lecția „”. Deoarece voi presupune deja că știți să folosiți animația pe site. În același timp, veți înțelege imediat cum wow.js vă face munca mai ușoară. La urma urmei, acum nu va trebui să scriem și să ne adâncim în codul js. Conectați-l și uitați-l

Și așa, introducerea s-a terminat. Acum să ne apropiem de „corp”. Am înregistrat o lecție video pe această temă, dar înainte de a viziona, vreau să vă arăt ce veți obține dacă finalizați lecția în practică. Ca să zic așa, pentru mai multă motivație

Ei bine, te-ai uitat? Acesta este ceea ce „te faci de râs” cu propriile mâini. Așa că acum alergați să vizionați videoclipul.

Lecție: WOW.js și Animate.CSS - mai multă distracție împreună!

Du-te!

Configurarea WOW.js Cum să descărcați și să vă conectați.

1 pas.

Descărcați scripturile wow.js și animate.css de pe site-urile oficiale (vezi linkurile de mai sus sub videoclip) și plasați-le în folderul proiectului.

Pasul 2.

Conectăm scripturile cu cod HTML simplu pe pagina din etichetă: Notă de la abonatul canalului Master-CSS: Eticheta de script trebuie adăugată întotdeauna la sfârșitul corpului. Acest lucru se face pentru a face pagina să se încarce rapid. De fiecare dată când browserul ajunge la o etichetă de script, încărcarea și redarea întregului site este înghețată până când scriptul este încărcat. Din această cauză, vedem adesea site-uri care
pentru o lungă perioadă de timp

Pasul 3. Trebuie să inițializați scriptul adăugând următorul cod, imediat după conectarea acestuia:

nou WOW().init();

În acest moment, conexiunea se termină și este timpul pentru a doua etapă.

Folosind WOW.js

Pasul 1. Selectați elementul pe care vrem să-l animem și adăugați-i class="wow". În codul de mai jos, am arătat asta folosind o imagine exemplu:

Pasul 2. Selectați animația și adăugați-o cu o clasă suplimentară câinelui nostru:

Pasul 3. Adăugați setări pentru animație dacă este necesar, folosind atribute speciale de date:

În codul de mai sus, am specificat că animația ar trebui să se declanșeze atunci când imaginea trece 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 în sine va dura exact 2 secunde.

Setări de animație WOW.js prin atribute data-wow-duration – specificați timpul de redare a animației data-wow-delay – setați o întârziere înainte de a reda animația data-wow-offset – activați animația când elementul trece de un anumit număr de pixeli de la partea de jos a ecranului data-wow- iteration – numărul de repetări de animație

Vă rugăm să rețineți că aceste atribute nu sunt obligatorii. Dacă nu le specificați, animația se va reda pur și simplu în mod implicit, de îndată ce elementul apare pe ecran în timp ce derulați fereastra browserului.

Ei bine, băieți. Probabil asta e tot. Dacă aveți întrebări, întrebați în comentarii ;)