Gravitatea este, de asemenea, o dispoziție: sumbră, înspăimântătoare și plictisitoare sau ușoară, fermecătoare și veselă. Prin reproducerea acestor tipuri de mișcări folosind CSS, putem reînvia interfețele site-urilor noastre cu animații interesante. Un exemplu simplu este o minge de bouncing. Mobilitatea acestuia poate fi utilizată pentru a atrage atenția utilizatorului asupra unui mesaj foarte important. Marcajul constă dintr-un element div, care este proiectat astfel încât să se poată asemăna cu o minge reală:
Și acum adăugăm CSS, care stabilește mișcarea mingii. Unele valori au fost împrumutate de la opera lui Albie Brown (Albie Brown). Pentru claritate, stilurile sunt date fără prefixele furnizorilor:
Folosesc unitățile vw și vh pentru a indica dimensiunea mingii și pentru mișcarea ei, astfel încât aceasta va fi complet receptivă în browserele moderne, fără a fi nevoie de solicitări media. Noi numim animația pentru minge:
Notă modificarea valorii proprietăților de transformare-origine, prin care devine mai ușor de a poziționa un element (în special în cazul în care ricoșează dintr-un alt obiect), și este mai ușor să adăugați o notă de realism, pe care o vom face în pasul următor.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Prin ea însăși, această animație creează iluzia de gravitate, dar nu este un efect complet: un obiect moale, cum ar fi o minge de cauciuc va fi ușor comprimat la lovirea sol și întindere (pentru a restabili forma) rebound. Cartograful american Walt Disney a spus că o astfel de mișcare, adică compresie și întindere, este "principiul cel mai important în animație". Artistii folosesc acest principiu pentru a-si da personajelor si obiectelor mai multa viata si realism. Acest lucru se poate face cu ușurință cu CSS. Trebuie să adăugăm funcția de scalare pentru proprietatea transformă, care este deja prezentă în animația noastră:
Măsura în care variază parametrii pentru compresie și întindere depinde parțial de obiectul însuși și parțial de stilul animației: în unele anime, de exemplu, pot fi setate valori limită. Desigur, această animație are încă o caracteristică nerealistă: continuă fără sfârșit. În cele ce urmează, voi descrie modul de adăugare a atenuării naturale pentru desenele de animație în CSS.
Uită-te la demo-ul acestui efect asupra CodePen
Ediție: Comanda webformself.
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
Trimiteți-le prietenilor: