Animație CSS: exemple de aplicații

Practica dezvoltării resurselor web a dus la două tendințe semnificative: viteza și calitatea. Primul obligă dezvoltatorul să-și facă rapid treaba, al doilea - determină limitele oportunității.

Vizitatorul urmărește un obiectiv specific atunci când vizitează site-ul și este ghidat de idei general acceptate despre locul în care este și cum ar trebui să funcționeze. Dezvoltatorul își poate face treaba așa cum este convenabil, dar dacă este interesat să atragă atenția unui număr mai mare de vizitatori, nu este recomandabil să nu ia în considerare opinia lor.

Sintaxa și semantica animației

Proprietatea de animație CSS este ușor de folosit și vă permite să efectuați rapid efecte interesante. Pentru ca elementele paginii web să se comporte într-o manieră modernă, așa cum așteaptă vizitatorul, este absolut inutil să arătați un spirit special și să vă creați propriile opțiuni de animație. Totul funcționează prin definiție, așa cum se așteaptă și în cerere.

În acest exemplu, sunt descrise două elemente. Primul este un indicator de bar, care se mută la dreapta și crește proporțional în dimensiune. Al doilea element este o imagine care se mișcă pur și simplu spre dreapta.

Nu toate ramele sunt afișate aici. Proprietatea de animație CSS în acest caz este implementată fără probleme. Vizitatorul paginii observă o mișcare netedă, cu o creștere a volumului liniei și a mișcării imaginii. Folosind diferite tipuri de mișcare în loc de ușurință în sus, poți controla mișcarea. Opțiunea ușurință în sus dă accelerație la început și decelerare la sfârșit, dar puteți alege o altă variantă a mișcării.

Suprapunerea și interacțiunea elementelor

Toate elementele care au proprietatea de animație sunt considerate de CSS independent unul de altul și de fluxul total al paginilor. Dacă elementele sunt suprapuse peste ele, atunci combinați efectele și, ca rezultat, un nou efect.

Dacă în timpul elementelor de animație schimbați proprietatea opacității (transparență), atunci datorită legilor amestecării culorilor puteți obține efecte foarte originale cu doar două sau trei elemente.

Figura elementului este de mare importanță. În exemplul de mai sus, o bandă este formată dintr-o imagine în care două linii au culori diferite. Atunci când mărimea benzii crește, este un ferăstrău, atunci când se deplasează fierăstarul este un val în mișcare. Manipularea liniilor și a pantei lor, puteți crea efecte în conformitate cu legile generale ale graficelor.

Schimbarea timpului de animație duce și la soluții non-standard. Folosind proprietatea de transformare, de exemplu, funcția de rotire a elementului, generează modificări inițiale. exemplu:

Aici, banda își schimbă în mod continuu aspectul de la starea opacă la cea transparentă. Imaginea de jos modifică numai forma.

Informații despre animație

În CSS: animația textului are o semnificație specială. Textul are întotdeauna importanță și este prezent pe pagina web pentru un anumit scop. Dar textul este întotdeauna mai puțin informativ decât imaginea, dar ocupă mult spațiu.

Garanție că un text scris în mod corespunzător va fi perceput în mod adecvat de către vizitator este semnificativ mai mare decât speranța pentru o înțelegere corectă a imaginii, mai ales atunci când proiectantul site-ul are propria sa idee despre sensul formelor de expresie.

Dacă mai devreme, când animația CSS doar a venit în lumea typesetting erau tickers populare, principiu normal de ceas, texte pulsează în construirea site-ului de astăzi este considerat intermitent fara a irita vizitatorul cât mai mult posibil în mod eficient pentru a prezenta funcționalitatea unei resurse web.

În acest context, oricare din exemplele de mai sus este util pentru prezentarea informațiilor textuale, dar opțiunea de a aplica CSS ca animație 3D este cea mai practică.

Aici, în starea "normală", textul ocupă puțin spațiu. Puteți selecta cuvântul principal sau puteți desemna o semnificație. De îndată ce mouse-ul atinge zona de text, se transformă din animația 3D CSS într-o stare normală.

Opțiunea de economisire a spațiului în combinație cu designul 3D vă permite să plasați informații compacte. Spațiul eliberat poate fi utilizat în alte scopuri sau în alte scopuri conexe. Datorită animației CSS, informațiile necesare vor fi disponibile la momentul potrivit.

Opțiunea de animație pentru consumatori

Succesele notabile în crearea de resurse web de înaltă calitate încalcă încă o singură întrebare ciudată: de ce este proiectarea site-ului preocuparea dezvoltatorului?

Un site nu este o operă de artă și nu rezultatul unui proces creativ în scopuri estetice. Site-ul este în primul rând funcționalitate, care, în opinia proprietarului (dezvoltatorului), va duce la noi vizitatori și va oferi posibilitatea de a lucra cu clienții lor.

Vinde bunurile, furnizează servicii, efectuează acea sau acea muncă ... Vizitatorul vine pentru bunuri, servicii și lucrări. Designul și animația sunt importante, dar opinia vizitatorului este încă mai importantă decât opinia proprietarului (dezvoltatorului).

Dacă într-un magazin obișnuit cumpărătorul are întotdeauna dreptate, de ce în magazinul online trebuie să facă tot ceea ce gândește dezvoltatorul prin proiectul propus? Animația în contextul CSS este un instrument excelent, dar de ce să nu mergem mai departe: câți consumatori, atât de multe opțiuni pentru a exprima funcționalitatea și designul.

Opțiunea „animație de consum“ - este atunci când există este faptul că dezvoltatorul a propus și că utilizatorii anterioare au selectat, și acest gând: consumatorul curent.