INAPOI
Scris de Marius Chiriac

Animatii JS legate de mouse

Animatiile dintr-un website pot transforma un layout simplu si plictisitor intr-unul dinamic si interesant ce va persista in mintea vizitatorului pentru multa vreme dupa ce a terminat umblat pe site-ul tau.

O animatie populara este cea in care pozitia mouse-ului pe ecran se foloseste la animarea elementelor din pagina. Acest lucru poate fi realizat prin mai multe metode, dar cele mai populare sunt animatiile legate de evenimente de tipul hover, la intrarea si iesirea mouse-ului de pe un element (mousemove, mouseenter, mouseout) sau prin preluarea coordonatelor cursorului pe axa X si axa Y.

Cu toate aceste tool-uri la dispozitia ta se poate crea un site foarte dinamic, unic si plin de caracter. De exemplu poti face ca elemente din site sa urmareasca cursorul sau poti deforma si schimba valorile implicite ale acestor elemente.

Mai jos avem un exemplu de animatie care se foloseste de interactia mouse-ului cu un element pentru a modifica alt element:

See the Pen
Mouse Flip JS
by Puiu (@Puiu)
on CodePen.

Coordonatele mouseu-ului pot fi folosite pentru a manipula o grafica, un cursor sau un element din pagina. Poti crea o animatie de urmarire a mouse-ului sau sa influentezi elementele din pagina in functie de pozitia mouse-ului.

See the Pen
Follow mouse JS
by Puiu (@Puiu)
on CodePen.

Alegerea tipurilor de animatii trebuie sa tina cont de tipul de site si audienta ta. Dar intotdeauna exista ceva ce poti face sa dai mai multa viata site-ului tau si sa creezi o experienta de neuitat pentru vizitatori.

Mai multe articole

INOVEO a scris

Copacul vieții

Cum o adolescentă din Călărași a refuzat în secret Academia de Poliție, a demontat tot ce mișca în curtea bunicului, a ales Automatica, a scris cod și a ajuns să mă convingă, douăzeci de ani [...]

Citeste tot articolul from Animatii JS legate de mouse

Citeste tot articolul

INOVEO a scris

Directorul de marketing care a refuzat Academia de Politie si a castigat un rebranding

Diseara, 19:00, conversatia cu Cristina Rusen pe canalul YouTube INOVEO. Episodul Brand Talks 2.0 despre omul care alege intotdeauna varianta mai grea si are de fiecare data dreptate. Cristina Rusen avea 18 ani cand a [...]

Citeste tot articolul from Animatii JS legate de mouse

Citeste tot articolul

INOVEO a scris

Brandul arata diferit pentru hotel, o fabrica de tamplarie si un distribuitor de implanturi dentare. Iar asta e exact partea care conteaza.

Exista o iluzie care circula printre antreprenori: ca brandingul e cam acelasi lucru, oriunde l-ai aplica. Logo, paleta, tone of voice, gata. Realitatea, pe care o vedem la INOVEO in fiecare proiect, e exact pe [...]

Citeste tot articolul from Animatii JS legate de mouse

Citeste tot articolul

INOVEO a scris

Sase intrebari pe care orice antreprenor si le pune inainte de un workshop de brand. Iata ce raspund cei care au trecut deja prin proces.

Inainte de orice workshop de brand pe care il conduc, simt ca exista o framantare interna a antreprenorului. Una care, daca o asculti cu atentie, suna cam asa: „oare am cu adevarat nevoie de asta [...]

Citeste tot articolul from Animatii JS legate de mouse

Citeste tot articolul

INOVEO
Prezentarea generala

Folosim cookie-urile pentru a va oferi cea mai buna experienta pe site-ul nostru. Informatiile privind cookie-urile sunt stocate in browserul dvs. si indeplinesc functii, cum ar fi recunoasterea dvs. atunci cand reveniti pe site-ul nostru si ajutati echipa noastra sa inteleaga ce sectiuni ale site-ului vi se par cele mai interesante si utile.

Cititi Politica de Cookie-uri si Politica de Confidentialitate.