Animatii CSS simple pentru website-ul tau

Daca un design bun face ca website-ul tau sa iasa in evidenta fata de competitori, animatiile vor da suflet acestuia si vor incanta vizitatorii.

Animatiile dintr-un website pot fi foarte complicate, uneori fiind necesar sa fie scrise multe linii de cod folosind CSS si JS. De data asta ne vom concentra pe un numar mic de animatii, scrise doar in CSS, pe care oricine le poate implementa foarte usor in site-ul lor pentru a face ca lucrurile sa fie mai dinamice si placute.

Prima categorie de animatii sunt cele de hover unde miscarea mouse-ului peste un element va porni animatia. Avem la alegere doua metode: folosind transition sau animation. Primul element (cerc in exemplul nostru) isi va schimba culoarea si textul ascuns va aparea folosind transition iar al doilea element isi va schimba dimensiunile folosind animation si transition. Avantajul la animation este puterea de control mult mai mare asupra animatiei. (pe mobil atingeti cercurile cu degetul sa porniti animatia si apoi oriunde sa o terminati)

Hover!

Hover!

Cod sursa pe Codepen

A doua categorie de animatii sunt cele care se repeta la infinit. Se pot forma elemente jucause pe site sau elemente care sa atraga atentia vizitatorului asupra unei zone importante a site-ului.

!

!

Cod sursa pe Codepen

Indiferent de ce tip de animatie introducem in website acestea trebuie sa se alinieze intotdeauna cu design-ul folosit. In acelasi timp trebuie sa avem grija sa nu introducem prea multe elemente care sa afecteze performanta. Intr-un articol viitor vom discuta despre animatiile de la incarcarea unei pagini si cele care pornesc de la un click.

Mai multe articole

INOVEO a scris

Evaluarea brandului

Stiu, e perioada Galelor, a Premiilor, a Bilanturilor de final de an, a Petrecerilor de Craciun… dar scriu ce ma inspira din munca mea de zi cu zi… Dupa filmarile de saptamana trecuta la INOVEO, [...]

Read More... from Animatii CSS simple pentru website-ul tau

Citeste tot articolul

INOVEO a scris

Comunicarea fluenta dintre departamentele de Marketing si Financiar

Adesea ni se intampla sa avem nevoie de limbi straine… Sau limbaj strain in cadrul aceleiasi limbi, daca vorbim de business. Da, in bugetare e nevoie sa fii poliglot. Comunicarea fluenta dintre departamentele de Marketing [...]

Read More... from Animatii CSS simple pentru website-ul tau

Citeste tot articolul

INOVEO a scris

Avantajele si dezavantajele unui website de tipul One Page

Site-urile sunt o esentiale pentru orice afacere sau proiect personal. Site-urile de tipul “one page” (o pagina), au devenit foarte populara in ultimii ani. Dar care sunt avantajele si dezavantajele unui astfel de site? Sa [...]

Read More... from Animatii CSS simple pentru website-ul tau

Citeste tot articolul

INOVEO a scris

De ce culorile alese arata diferit in print fata de online

Culorile joaca un rol crucial in definirea identitatii vizuale a unui brand. De la celebrul rosu al Coca-Cola la albastrul vibrant al Facebook, culorile au puterea de a evoca emotii, de a crea recunoastere a [...]

Read More... from Animatii CSS simple pentru website-ul tau

Citeste tot articolul