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, de 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 remarcat 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

Această colecție conține cele mai bune și de cea mai înaltă calitate funcții CSS. Aici puteți găsi exemple și tehnici demonstrative diverse și uimitoare de la designeri și designeri de layout celebri care încearcă să demonstreze că acum este posibil să faceți aproape totul folosind doar CSS pur. De asemenea, puteți găsi aici câteva lecții care vă spun în detaliu cum să realizați o astfel de creație. Sper că această colecție vă va fi de folos.

CSS nori 3D

În această demonstrație veți putea crea și edita nori de luxîn 3D. Aceste nori CSS ne arată clar că posibilitățile tehnologiilor web sunt aproape nelimitate.

Logo-uri CSS pure

Acestea sunt exemple de logo-uri realizate numai cu CSS pur. Gândește-te la asta, nu au fost folosite imagini la crearea sa. E doar ceva.

Alfabet cu animație CSS

Exemplu minunat și artistic de utilizare a CSS în alfabet

Navigare 3D pentru site

O bară de navigare simplă, dar foarte elegantă pentru site, bineînțeles realizată folosind doar CSS3. fără imagini sau scripturi.

Doodle Google cu CSS

Unul dintre numeroasele doodle-uri din motorul de căutare Google, realizat în CSS. Acesta este un exemplu excelent de bună utilizare a animației CSS.

Glisor

Un glisor bine făcut și de înaltă calitate pentru imagini. Plus 4 exemple în demo.

Inel dublu animat

Un inel frumos animat și multicolor, cu puțin cod CSS

Estompare în CSS

Mi se pare că acest filtru este foarte necesar, mai ales că este realizat folosind CSS pur. Folosind estomparea, puteți atrage atenția utilizatorului asupra unui anumit punct.

Ghidul complet pentru Flexbox

Acest articol este despre blocurile Flexbox receptive. Vorbește complet despre aceste blocuri, deși articolul este în engleză.

Meniu colorat și animat pe CSS3

Un meniu derulant frumos pentru un site web cu pictograme. Un mare plus este că este realizat în întregime în CSS.

filtre CSS

Material de înaltă calitate în limba engleză, care vorbește despre utilizarea filtrelor CSS pe imagini.

Forme CSS

O postare despre formularele CSS cu numeroase exemple

Bare de progres în CSS

O lecție despre cum să creați bare de progres elegante folosind CSS pur și animație. De asemenea, puteți să vă uitați la exemplu și să descărcați sursele.

Animație - Animate.css

Cel mai popular proiect de animație CSS de pe Internet astăzi. Și probabil cel mai simplu și de cea mai înaltă calitate, și, de asemenea, gratuit.

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

Dacă doriți să faceți o animație CSS a unei imagini, text sau butoane pentru un site web și să implementați toate acestea fără a utiliza 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 capului.

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ăriți 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ăriți tutorialul video

Toate exemplele descrise anterior setează animația imediat după încărcarea paginii, dar în practică acest lucru este rareori necesar. În practică, este de foarte multe ori necesar să setați animația 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)( var efect = elem.data(„efect”); if(!efect || elem.hasClass(efect)) returnează false; elem.addClass(efect); setTimeout(function())( 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 mouseenter 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ăriți 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.

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 ca ei să deruleze pagina la 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 ar trebui să fie întotdeauna adăugată 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. Acesta este motivul pentru care 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 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 ;)