10 frammenti CSS e JavaScript personalizzati per effetti al passaggio del mouse e clic

Gli sviluppatori possono creare effetti pazzeschi con semplici azioni dell'utente come il passaggio del mouse e i clic del mouse. Questi si riferiscono principalmente agli utenti desktop, ma il Web mobile supporta anche gli effetti clic/tocco nella maggior parte dei browser.

Se stai cercando delle idee interessanti da replicare nei tuoi progetti, allora questa collezione avrà sicuramente qualcosa per te. Chiunque conosca un po' di JavaScript e CSS può facilmente modificare questi effetti per funzionare in qualsiasi browser, per qualsiasi sito Web e migliorare l'esperienza di un layout.

Effetti al passaggio del mouse

L'ovvio punto di partenza per gli effetti di animazione sono i pulsanti CSS. Questi sono i più pratici nell'uso quotidiano poiché gestiscono molta interattività. I pulsanti CTA richiedono praticamente attenzione e con questi effetti al passaggio del mouse puoi attirare l'attenzione ancora più velocemente.

Ogni effetto utilizza puro CSS per l'animazione. Un paio di questi pulsanti si basano su JavaScript per gli eventi di passaggio del mouse, ma tutte le animazioni sono comunque controllate direttamente in CSS.

Se stai progettando un layout piatto, queste animazioni saranno super facili da utilizzare.

Navigazione al passaggio del mouse

Per questa penna troverai una manciata di eventi di navigazione al passaggio del mouse. Questi si basano sul puro CSS che controlla nuovamente ogni collegamento ipertestuale con un diverso effetto al passaggio del mouse.

I menu di navigazione sono in genere molto semplici e generici. Ecco perché gli eventi al passaggio del mouse possono davvero ravvivare il design e mostrare ai visitatori che tieni ai piccoli dettagli.

La maggior parte di queste animazioni sono abbastanza mansuete da adattarsi a qualsiasi sito Web, quindi sono ottime per copiare/incollare facilmente in qualsiasi layout.

Effetti al passaggio del mouse

Quante volte trovi gallerie fotografiche con sottotitoli noiosi e senza un contesto reale? Li vedo troppo spesso e si sentono pigri.

Mi piacciono molto questi effetti fotografici che si basano tutti sulla semplice galleria di miniature. Quando passi il mouse su un'immagine, vedrai il titolo della foto, una descrizione e un pulsante "leggi di più".

Ogni elemento scorre alla vista da diverse angolazioni e aiuta questa galleria di immagini a comparire subito fuori dalla pagina.

Descrizione comando CSS al passaggio del mouse

Ogni browser supporta le descrizioni comandi predefinite, ma puoi sempre crearne di tue usando i plug-in o clonando penne come questa. È stato sviluppato da Ty Strong e mostra fino a che punto puoi spingerti con i tooltip CSS puri.

L'intero snippet funziona mirando al tag HTML <dfn>. Quando si passa il mouse su qualsiasi testo racchiuso in questo tag, verrà automaticamente visualizzato al passaggio del mouse come una descrizione comando.

I triangoli CSS puri esistono da anni, quindi è abbastanza facile ricreare lo stile del suggerimento. Ma sono molto impressionato dagli stati di animazione fluidi, tutti controllati tramite CSS3.

Icone CSS al passaggio del mouse

Ecco un altro esempio di qualcosa di interessante che puoi realizzare con i CSS puri. Questi semplici pulsanti hanno tutti icone nascoste che appaiono solo quando un cursore si ferma su di esse.

Ogni icona proviene da Font Awesome, quindi puoi replicare questo design con icone totalmente gratuite.

Gli effetti includono slide-in, allungamenti e icone di dissolvenza che appaiono al passaggio del mouse e scompaiono quando il cursore si sposta altrove.

Impaginazione infinita

L'impaginazione web è sempre piuttosto noiosa, probabilmente perché non è una parte appariscente dell'interfaccia. Ma con questo effetto di impaginazione di Mariusz Dabrowski potresti portare la tua impaginazione al livello successivo.

L'unica cosa di questa animazione è che è fatta per caricare da una pagina all'altra. Quindi funziona meglio con le pagine basate su Ajax in cui l'intera pagina non viene ricaricata. In questo modo l'intera animazione è visibile mentre vengono caricati i nuovi contenuti.

Ha sicuramente un valore pratico limitato ma l'effetto è superbo.

Animazione di navigazione sovrapposta

I menu di navigazione a schermo intero sono molto popolari per i siti Web reattivi per dispositivi mobili e funzionano anche per la maggior parte degli utenti. Ma questi non devono essere noiosi o statici quando hai effetti di sovrapposizione come questo gratuitamente su CodePen.

Lo sviluppatore Ryan Mulligan ha creato questa animazione bestiale con fotogrammi chiave CSS puri in esecuzione su una singola classe CSS.

L'evento click viene attivato tramite jQuery, ma il movimento è tutto CSS. Sicuramente una delle animazioni più interessanti che ho visto ed è sorprendentemente facile da avviare.

Effetto clic CSS puro

Il design del materiale di Google delinea una serie di effetti animati e uno è l'effetto clic increspato. Questo è più comune con i dispositivi Android, ma è trapelato anche sul Web.

E con questa penna puoi replicare l'effetto increspatura nel tuo lavoro usando nient'altro che codice CSS.

Questo snippet prende di mira le icone che si accendono anche quando vengono selezionate, quindi è un po' più simile alla tabulazione/selezione degli elementi della pagina. Ma gli effetti sono trasferibili a qualsiasi cosa che lo renda facile da clonare.

Pulsante Mana

Ecco uno degli effetti dei pulsanti più unici che abbia mai visto utilizzando SVG per le forme e CSS per l'animazione.

Il programmatore Dean Hidri ha creato questo effetto pulsante di mana con solo 80 righe di CSS e un paio di dozzine di righe di HTML (con l'SVG incluso). Al passaggio del mouse questo pulsante anima una forma liquida personalizzata all'interno del pulsante per creare un riempimento di sfondo, quindi si anima in seguito.

Se hai un sito che potrebbe utilizzare questo stile di pulsanti, vale sicuramente la pena giocarci.

Iconico pulsante FX

Puoi fare molto con i caratteri delle icone e questi pulsanti animati di David Darnes sono un ottimo esempio.

Le icone si animano in modo diverso quando si passa con il mouse, ognuna con il proprio effetto distintivo. Potresti non utilizzare tutte queste icone in un sito Web, ma gli stili di animazione personalizzati sono facili da clonare. Funzionano esclusivamente su CSS3 e si adatterebbero a qualsiasi carattere icona tu scelga. Un effetto davvero divertente da clonare praticamente per qualsiasi sito web!

E questo conclude la mia lista di effetti UX, ma questa non è certamente la raccolta definitiva.

Se navighi sul web puoi trovare molti altri effetti di pulsanti/icone al passaggio del mouse e molti hanno codice sorgente gratuito. Ma se vuoi saperne di più sull'animazione web personalizzata, dai un'occhiata al nostro enorme elenco di plugin e risorse per gli sviluppatori.