Adăugarea de animații CSS la WordPress

Animațiile pot fi o caracteristică captivantă și interesantă din punct de vedere vizual pentru paginile dvs. web. Cu toate acestea, crearea de animații cu Flash sau JavaScript va consuma o parte semnificativă din resursele site-ului dvs.

Din fericire, puteți adăuga animații pe site-ul dvs. WordPress cu foi de stil în cascadă (CSS). Acest limbaj de codare vă permite să încorporați animații nelimitate pe site-ul dvs., dar este încă relativ accesibil și ușor de învățat.

În acest articol, vom discuta cum funcționează animațiile CSS și cum să adăugați o proprietate de animație CSS pe site-ul dvs. cu și fără pluginuri. Să ne mișcăm!

Cum funcționează animațiile CSS? (Și de ce ar trebui să le folosiți)

CSS3 oferă utilizatorilor posibilitatea de a crea animații prin schimbarea stilului unui element (de exemplu, o imagine sau un buton) în timp. Puteți modifica câte proprietăți CSS ale elementului doriți, de câte ori doriți.

Spre deosebire de animațiile Flash sau Javascript, animațiile CSS evită problemele de compatibilitate cu browserul și codarea complicată. Acest lucru vă permite să atrageți atenția asupra caracteristicilor importante fără efecte secundare negative, cum ar fi scăderea performanței.

Adăugarea de animații CSS cu un plugin

Dacă nu sunteți încrezător în abilitățile dvs. de codare, vă oferim acoperire. În schimb, puteți crea cu ușurință animații CSS cu un plugin.

Pasul 1: Instalați și activați un plugin de animație CSS

Pentru a începe, va trebui să instalați un plugin de animație CSS. Folosim Blocks Animation: CSS Animations for Gutenberg Blocks, un instrument relativ nou creat special pentru Editorul de blocuri.

Puteți găsi acest plugin navigând la Plugins > Adăugați nou în tabloul de bord WordPress. După ce l-ați localizat, faceți clic pe Instalați acum și apoi pe Activați :

După ce activarea este completă, accesați postarea sau pagina în care doriți să includeți animația dvs. simplă.

Pasul 2: Proiectează-ți animația

Apoi, faceți clic pe elementul pe care doriți să îl animați. În fila Blocare a barei laterale, căutați secțiunea etichetată Animație , care a fost adăugată când am activat pluginul la Pasul 1 . Aici veți vedea un meniu derulant care listează mai multe efecte diferite:

Vă puteți juca cu câte opțiuni de animație doriți, pentru a găsi pe cea care se potrivește conținutului dvs.

Pasul 3: Personalizați întârzierea și viteza

Pluginul Blocks Animation vine și cu o funcție de sincronizare pentru a personaliza întârzierea și viteza animației:

Prima dintre aceste două setări amână începerea animației. Acest lucru vă poate ajuta să atrageți atenția asupra elementului dvs. după ce pagina s-a încărcat sau vă poate permite să utilizați animații în combinație, așa cum vom demonstra în curând. Puteți seta proprietatea de întârziere a animației până la cinci secunde.

Folosind meniul drop-down de viteză, puteți face animația Lentă, Mai lent, Rapidă sau Mai rapidă . O animație mai lentă poate fi mai subtilă și mai puțin tulburătoare pentru vizitatori, în timp ce o animație mai rapidă va face mai mult pentru a le atrage atenția.

Pasul 4: Salvați și previzualizați animația

Vă recomandăm să salvați postarea sau pagina ca schiță și să previzualizați elementul animat înainte de a o publica. Asigurați-vă că salvați și proprietatea numelui animației dacă lucrați cu mai multe animații CSS pe o singură pagină. Deși animațiile se pot dovedi foarte utile, ele au și potențialul de a distra atenția și de a vă face paginile aglomerate.

Previzualizarea paginii și păstrarea animațiilor relativ simple va preveni aceste rezultate nedorite. Mai jos, puteți vedea exemplul nostru de animație CSS finalizat, care asociază o imagine animată cu butonul pe care l-am stilizat în pașii anteriori:

În cazul în care descoperiți că animația dvs. nu se potrivește cu restul conținutului sau are efectul dorit, puteți pur și simplu să vă întoarceți la Editorul de blocuri și să o ajustați. Aceasta este frumusețea utilizării unui plugin de animație CSS - este rapid și ușor.

Adăugarea de animații CSS fără un plugin

Dacă vă place să editați fișierele temei dvs., puteți crea manual animații personalizate fără un plugin. Este nevoie de un pic de cunoștințe de codare, așa că această soluție poate fi lăsată cel mai bine celor cu experiență în dezvoltare.

Înainte de a începe, asigurați-vă că ați făcut o copie de rezervă a site-ului dvs. De asemenea, este înțelept să utilizați o temă copil, astfel încât să puteți reveni cu ușurință la fișierele implicite ale temei dvs. dacă simțiți nevoia.

Pasul 1: Înțelegeți proprietățile CSS implicate

Înainte de a efectua orice editare, există opt proprietăți importante de care trebuie să țineți cont atunci când creați animații CSS:

• @keyframes: Specifică stilurile care vor fi aplicate elementului prin animație.
• animation-name: creează un nume pe care îl puteți folosi pentru a face referire la animație în altă parte din cod.
• animation-duration: definește cât timp ar trebui să ruleze animația.
• animation-delay: indică cât de mult ar trebui să aștepte o animație pentru a începe odată ce pagina este încărcată.
• animation-iteration-count: notează de câte ori ar trebui să ruleze animația.
• animations-direction: indică în ce direcție ar trebui să ruleze animația.
• animation-timing-function: Determină curba de viteză a animației.
• animation-fill-mode: Specifică un stil pentru element atunci când animația nu este redată.
• animație: o proprietate scurtă pentru legarea cadrelor cheie la elemente.

Cea mai importantă dintre aceste proprietăți de înțeles este „cheie”. Acest termen provine de la procesele de animație desenate manual, în care cadrul principal a fost numit cadru-cheie, iar altele au fost desenate pentru a intra sau ieși din el.

În animația CSS, cadrul cheie specifică ce se întâmplă și când. Luați-o pe aceasta, de exemplu:

 exemplu @keyframes {
 0% {culoare de fundal: roșu;}
 25% {culoare de fundal: galben;}
 50% {culoarea fundalului: albastru;}
 100% {culoare de fundal: verde;}
 }

Cadrul cheie de mai sus afirmă că pe 25% din timpul animației, culoarea de fundal a elementului specificat se va schimba de la roșu la galben. Procentele sunt de obicei folosite pentru a defini momentul animației. Cu toate acestea, de la și până la pot fi utilizate în locul 0% și, respectiv, 100%.

Pasul 2: Creați fișierul animate.css

Pentru a adăuga animații CSS, va trebui să creați un fișier în editorul de text preferat folosind proprietățile de mai sus. Ar trebui să includă cadre cheie pentru orice animație pe care doriți să le utilizați. Apoi le veți lega de anumite clase CSS, astfel încât să le puteți aplica elementelor de pe site-ul dvs.

Iată un exemplu. În codul de mai jos, creăm mai întâi o animație de cadru cheie CSS folosind proprietățile de transformare și vizibilitate, care ne vor permite să glisăm un element din partea dreaptă a ecranului:

 @keyframes slideInRight {
din {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
vizibilitate: vizibil;
}
la {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

Apoi trebuie să legăm acel cadru cheie la o clasă CSS. În acest caz, a fost numit slideInRight. Acest cod va fi plasat direct după cadrul cheie de mai sus în fișier:

 .slideInRight {
 -webkit-animation-name: slideInRight;
 nume-animație: slideInRight;
 }

Puteți repeta acest proces pentru a crea câte animații doriți. Apoi, salvați fișierul ca animate.css. Alternativ, puteți descărca popularul fișier Animate.css. Conține cadrele cheie și clasele CSS pentru zeci de animații populare, astfel încât nu trebuie să vă codificați propria animație complexă.

Pasul 3: Încărcați fișierul animate.css pe site-ul dvs

Odată ce fișierul animate.css este complet, va trebui să-l încărcați în directorul temei. Pentru a face acest lucru, accesați site-ul dvs. utilizând File Transfer Protocol (FTP) și un client FTP, cum ar fi FileZilla. Puteți găsi acreditările necesare în contul dvs. de găzduire.

Va trebui să introduceți directorul public_html , să navigați la wp-content > teme și să găsiți folderul pentru tema dvs. activă (sau tema copil):

Căutați un subdirector etichetat css . Dacă există unul, încărcați fișierul animate.css (sau fișierul animate.mini.css din Animate.css) în acesta. În cazul în care nu aveți deja acest folder, puteți crea cu ușurință un nou subdirector și îl puteți denumi în consecință:

După ce fișierul dvs. este încărcat cu succes, nu părăsiți imediat clientul dvs. FTP. Va trebui să editați puțin fișierul pentru a accesa această foaie de stil pe site-ul dvs. WordPress.

Pasul 4: Apelați foaia de stil Animate prin functions.php

Apoi, în folderul temei active, găsiți fișierul functions.php . La sfârșit, adăugați acest fragment de cod:

 add_action( 'wp_enqueue_scripts', 'wpb_animate_styles');
funcția wpb_animate_styles() {
 wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.css', '3.5.0', 'all');
}

Rețineți că, dacă ați încărcat fișierul animate.min.css din Animate.css, va trebui să utilizați animate.min.css în ultima linie în loc de animate.css.

Acest lucru permite temei dvs. să apeleze foaia de stil pe care tocmai ați încărcat-o, astfel încât să puteți aplica clasele din ea elementelor de pe site-ul dvs. Odată ce modificările sunt salvate, întoarceți-vă la tabloul de bord WordPress.

Pasul 5: Aplicați animații folosind clase CSS

Acum puteți aplica orice clasă din fișierul animate.css elementelor din postările și paginile dvs. Dacă utilizați fișierul Animate.css, puteți face referire la o listă completă a tot ceea ce include pe GitHub.

Navigați la postarea sau pagina care conține elementul pe care doriți să îl animați. În Editorul clasic, treceți la editorul de text. Dacă utilizați Editorul de blocuri, faceți clic pe pictograma cu trei puncte din bara de instrumente pentru blocuri și selectați Editați ca HTML :

Apoi, adăugați clasa animată și clasa pentru animație la eticheta elementului:

În cele din urmă, previzualizați postarea sau pagina. Animația dvs. ar trebui să funcționeze acum:

Puteți adapta acest proces pentru a încorpora orice animație în fișierul animate.css .

Păstrați site-ul dvs. să arate grozav cu WP Engine

Utilizarea unor funcții interesante din punct de vedere vizual, cum ar fi animațiile, poate implica vizitatorii site-ului dvs. și poate crea o prezență online mai profesionistă. Aici, la WP Engine, ne mândrim să oferim cele mai bune sfaturi și trucuri pentru dezvoltatorii WordPress, astfel încât site-ul dvs. să arate întotdeauna cel mai bine.

Atunci când este combinat cu platforma noastră de găzduire de top, veți avea toate instrumentele de care aveți nevoie pentru a vă impresiona utilizatorii. Consultați planurile noastre astăzi!