10 fragmente CSS și JavaScript personalizate pentru efectele Hover & Click

Dezvoltatorii pot realiza niște efecte nebunești cu acțiuni simple ale utilizatorului, cum ar fi trecerea cu mouse-ul și clicurile de mouse. Acestea se referă în principal la utilizatorii de desktop, dar web-ul mobil acceptă și efecte de clic/atingere în majoritatea browserelor.

Dacă sunteți în căutarea unor idei interesante de replicat în propriile proiecte, atunci această colecție va avea cu siguranță ceva pentru dvs. Oricine cunoaște puțin JavaScript și CSS poate modifica cu ușurință aceste efecte pentru a funcționa în orice browser, pentru orice site web și poate îmbunătăți experiența unui aspect.

Buton Hover Effects

Punctul de pornire evident pentru efectele de animație sunt butoanele CSS. Acestea sunt cele mai practice în utilizarea de zi cu zi, deoarece gestionează multă interactivitate. Butoanele CTA cersesc practic atenție și cu aceste efecte de hover puteți atrage atenția și mai repede.

Fiecare efect folosește CSS pur pentru animație. Câteva dintre aceste butoane se bazează pe JavaScript pentru evenimentele de trecere cu mouse-ul, dar toate animațiile sunt încă controlate chiar în CSS.

Dacă proiectați un aspect plat, aceste animații vor fi foarte ușor de lucrat.

Nav Hovers

Pentru acest creion, veți găsi o mână de evenimente de navigare. Acestea se bazează pe CSS pur care controlează din nou fiecare hyperlink cu un efect de hover diferit.

Meniurile de navigare sunt de obicei foarte simple și generice. De aceea, evenimentele de tip hover pot condimenta cu adevărat designul și pot arăta vizitatorilor că vă pasă de micile detalii.

Cele mai multe dintre aceste animații sunt suficient de blânde pentru a se potrivi pe orice site web, așa că sunt grozave pentru copiere/lipire ușoară în orice aspect.

Fotografie Efecte Hover

Cât de des găsești galerii foto cu subtitrări plictisitoare și fără context real? Le văd prea des și se simt leneși.

Îmi plac foarte mult aceste efecte foto care se bazează toate pe galeria simplă de miniaturi. Când treceți cu mouse-ul pe o imagine, veți vedea titlul fotografiei, o descriere și un buton „citește mai multe”.

Fiecare element alunecă în vedere din unghiuri diferite și ajută această galerie de imagini să apară chiar de pe pagină.

CSS Tooltip Hovers

Fiecare browser acceptă sfaturi cu instrumente implicite, dar puteți oricând să vă creați propriile dvs. folosind plugin-uri sau clonând stilouri ca acesta. A fost dezvoltat de Ty Strong și arată cât de departe puteți duce sfaturi CSS pur.

Întregul fragment funcționează prin direcționarea etichetei HTML <dfn>. Când treceți cu mouse-ul pe orice text inclus în această etichetă, acesta va apărea automat la trecerea cu mouse-ul, arătând ca un balon explicativ.

Triunghiurile CSS pure există de ani de zile, așa că este destul de ușor să recreați stilul de tip tooltip. Dar cel mai mult sunt impresionat de stările fluide ale animației, toate controlate prin CSS3.

Pictograme CSS pe Hover

Iată încă un exemplu de ceva grozav pe care îl poți face cu CSS pur. Toate aceste butoane simple au pictograme ascunse care apar numai atunci când un cursor aterizează deasupra lor.

Fiecare pictogramă vine de la Font Awesome, astfel încât să puteți replica acest design cu pictograme complet gratuite.

Efectele includ pictograme glisante, întinderi și estompare care apar la trecerea cursorului și dispar când cursorul se deplasează în altă parte.

Paginare infinită

Paginarea web este întotdeauna destul de plictisitoare, probabil pentru că nu este o parte strălucitoare a interfeței. Dar, cu acest efect de paginare de Mariusz Dabrowski, ați putea duce paginarea la următorul nivel.

Singurul lucru despre această animație este că este făcută pentru a se încărca de la o pagină la alta. Deci funcționează cel mai bine cu paginile bazate pe Ajax unde întreaga pagină nu se reîncarcă. În acest fel, întreaga animație este vizibilă în timp ce noul conținut se încarcă la vedere.

Cu siguranță are o valoare practică limitată, dar efectul este superb.

Suprapunere Nav Animație

Meniurile de navigare pe ecran complet sunt foarte populare pentru site-urile web responsive mobile și funcționează și pentru majoritatea utilizatorilor. Dar acestea nu trebuie să fie plictisitoare sau statice atunci când aveți efecte de suprapunere ca acesta gratuit pe CodePen.

Dezvoltatorul Ryan Mulligan a creat această animație bestială cu cadre cheie CSS pure care rulează pe o singură clasă CSS.

Evenimentul clic este declanșat prin jQuery, dar mișcarea este doar CSS. Cu siguranță una dintre animațiile mai cool pe care le-am văzut și este surprinzător de neted la pornire.

Efect de clic CSS pur

Designul materialului Google conturează o serie de efecte animate, iar unul este efectul de clic ondulat. Acest lucru este cel mai obișnuit cu dispozitivele Android, dar și-a pătruns și pe web.

Și cu acest stilou puteți replica efectul de ondulare în propria dvs. lucrare folosind nimic altceva decât codul CSS.

Acest fragment vizează pictogramele care se aprind și atunci când sunt selectate, așa că se aseamănă mai mult cu afilarea/selectarea elementelor paginii. Dar efectele sunt transferabile la orice lucru care face ca acest lucru să fie ușor de clonat.

Butonul Mana

Iată unul dintre cele mai unice efecte de buton pe care le-am văzut vreodată folosind SVG-uri pentru forme și CSS pentru animație.

Codificatorul Dean Hidri a creat acest efect de buton de mana cu doar 80 de linii de CSS și câteva zeci de linii de HTML (cu SVG-ul inclus). La trecerea cu mouse-ul, acest buton animează o formă de lichid personalizată în interiorul butonului pentru a crea o umplere de fundal, apoi se animă în afară.

Dacă aveți un site care ar putea folosi acest stil de buton, cu siguranță merită să vă jucați.

Buton iconic FX

Puteți face multe cu fonturile pentru pictograme, iar aceste butoane animate de David Darnes sunt un exemplu grozav.

Pictogramele se animă într-un mod diferit atunci când sunt plasate, fiecare având propriul efect de semnătură. Este posibil să nu utilizați toate aceste pictograme într-un singur site web, dar stilurile de animație personalizate sunt ușor de clonat. Funcționează numai pe CSS3 și s-ar potrivi cu orice font de pictogramă pe care îl alegeți. Un efect cu adevărat distractiv de clonat pentru aproape orice site!

Și asta termină lista mea de efecte UX, dar aceasta cu siguranță nu este colecția definitivă.

Dacă parcurgeți internetul, puteți găsi o mulțime de alte efecte de trecere a butoanelor/pictogramei și multe au cod sursă gratuit. Dar dacă doriți să aflați mai multe despre animația web personalizată, consultați lista noastră masivă de pluginuri și resurse pentru dezvoltatori.