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

Marius Chiriac a scris

Importanta alinierii unui website la brandul companiei

In era digitala in care traim, prezenta online este esentiala pentru succesul unei companii. Un website bine dezvoltat si gestionat corect poate fi un instrument puternic pentru a atrage si a angaja audienta. Insa, pentru [...]

Citeste tot articolul from Animatii JS legate de mouse

Citeste tot articolul

Dochita Zenoveiov a scris

Touchpoints Workshop

Brandingul nu e doar numele si logo-ul. Este si despre touchpointuri. Saptamana trecuta un prospect mi-a dezvaluit ca s-a intalnit cu noi doar pentru ca un fost client de-al nostru a insistat sa ne cunoasca, [...]

Citeste tot articolul from Animatii JS legate de mouse

Citeste tot articolul

Dochita Zenoveiov a scris

Nume evocativ

Cum isi construiesc asiaticii strategia de #naming. Cum isi aleg numele. Sa luam exemplul Samsung. E un nume descriptiv, evocativ sau abstract? Lee Byung-chull, fondatorul Samsung, a urmat cursurile Universitatii Waseda din Tokyo, Japonia, dar [...]

Citeste tot articolul from Animatii JS legate de mouse

Citeste tot articolul

Dochita Zenoveiov a scris

Customer Journey Workshop

Acesta se refera la toate interactiunile si etapele prin care trece un client in timp ce interactioneaza cu un brand. Customer Journey-ul include toate punctele de contact si canalele prin care un client vine in [...]

Citeste tot articolul from Animatii JS legate de mouse

Citeste tot articolul