fbpx

Effetti Hover efficaci su immagini con transizioni e trasformazioni

In questo video tutorial vi parlo delle transizioni e delle trasformazioni come metodo per ottenere effetti hover efficaci su immagini al mousehover.

Il modulo Transizioni e Trasformazioni Css è comparso nelle nuove specifiche del CSSWG, un sottogruppo del W3C creato con lo scopo di promuovere nuovi sviluppi dopo l’approvazione definitiva dei CSS 2.1. Queste nuove proposte sono diventate il livello 3 ed il capitolo Transizioni/Trasformazioni è entrato a far parte del Livello 1 delle specifiche CSS3 e sono una novità assoluta mai affrontata nelle specifiche CSS1 e CSS2.

Cosa è la transizione?

La transizione è una forma semplice di animazione ed è un movimento tra due stati. Partendo da questa affermazione semplice ma importante è possibile creare delle animazioni semplici ma efficaci ed al tempo stesso accattivanti per l’utente sia su immagini che su elementi di UI Design come pulsanti per poi arrivare a creare animazioni più complesse con i keyframes che affronteremo in un altro articolo.

Cosa sono le trasformazioni?

Le trasformazioni sono modifiche alle immagini e possono essere di 4 tipi: traslazione, rotazione, modifica dimensioni o scala, distorci. Queste 4 funzioni possono essere combinate insieme nella funzione Matrix. Quando applichiamo una trasformazione  è importante usare i prefissi dei differenti browsers per far si che abbiano un livello di compatibilità elevato, fino a quando le specifiche CSS3 saranno approvate definitivamente dal W3C come codice standard.

Rotazione (rotation).

La rotazione è la modifica di un immagine che può essere ruotata in senso orario e antiorario. I valori della trasformazione sono specificati in gradi (deg) con un valore positivo o negativo per creare una rotazione orario o antiorario.
Quando impostiamo una rotazione questa avviene dal centro dell’elemento chiamato origine di trasformazione ( transform-origin ). Possiamo quindi modificare questo punto di origine in un punto diverso dal centro ( bottom, top, right, left ).

Scala ( scale )

Scala è una modifica delle dimensioni originarie di un elemento e può riguardare solo l’altezza, solo la larghezza od entrambi. Chiaramente per avere una modifica della dimensione originaria proporzionale è importante scalare sia altezza che larghezza. I valori di scala sono rappresentati da numeri multiplo ( 1, 1.1, 1.2, ecc ). Con la funzione di scala orizzontale ( scaleX) è possibile capovolgere una immagine creando un effetto specchio con un numero multiplo negativo.

Traslare ( translate)

Traslare vuol dire spostare un’immagine dal suo punto iniziale. TraslateX muove l’immagine in orizzontale, translateY muove l’immagine in verticale e translate (x,y) muove l’immagine orizzontalmente e verticalmente. L’unità di misura è il pixel.

Distorci ( skew )

Distorci permette di deformare un immagine orizzontalmente o verticalmente. L’unità di misura è il grado (deg) e anche qui possiamo usare solo la distorsione orizzontale skewX () o solo quella verticale skewY o entrambe skew (x, y).
Le trasformazioni possono essere anche più di una per immagine. Per esempio se vogliamo aumentare le dimensioni di un immagine e ruotarla scriviamo in questo modo:
img{rotate(45deg) scale(1.1,1.1);
-webkit-rotate(45deg) scale(1.1,1.1);
-moz-rotate(45deg) scale(1.1,1.1);
-ms-rotate(45deg) scale(1.1,1.1);
-o-rotate(45deg) scale(1.1,1.1);
}

Transizioni

Adesso applichiamo le transizioni alle trasformazioni di uno stato iniziale di partenza e finale modificato determinato da un evento come il mousehover sull’immagine o pulsante.
Più dettagliatamente le transizioni sono quindi un movimento, un passaggio da uno stato ad un’altro, spesso iniziato da un evento dell’utente ( mouse hover ) su un elemento. Invece le animazioni con i keyframes ti permettono di animare più stati.
 La transizione non è altro che un movimento che permette un passaggio più dolce tra uno stato ed un altro. Senza la transizione il passaggio avverrebbe lo stesso ma a scatti.

La transizione si misura in secondi (2s) o millisecondi (2350ms).

Combinare più transizioni

Supponiamo quindi che vogliamo ruotare un’immagine di 360 gradi e traslarla verticalmente di 30px al passaggio del mouse:
img{
transition: 2s all;
-webkit-transition: 2s all}
Applichiamo la transizione di 2 secondi allo stato di partenza. “All” sta a significare che si riferisce a qualsiasi tipo di trasformazione.
img:hover{
transform:rotate (365deg) translate(30px 0);
-webkit-transform:rotate(365deg) translate(30px 0);
}
Impostiamo la trasformazione allo stato finale.

Per ogni transizione è possibile stabilire una durata ed una trasformazione e quindi è possibile combinare più transizioni
Per esempio se volessimo modificare l’opacità di un immagine e spostarla possiamo combinare insieme queste due trasformazioni:

img{
width:300px;
height:300px;
float:left;
position:relative;
transition: opacity, translateX;
-webkit-transition: opacity, translateX;
-moz-transition: opacity, translateX;
-o-transition: opacity, translateX;
transition-duration: 1s, .5s;
-webkit-transition-duration: 1s, .5s;
}

Differenti tipi di transizioni

Le transizioni sono dei movimenti non meccaniche ma organiche che permettono di muovere un immagine dal suo stato iniziale o di default ad uno stato finale grazie ad un movimento che raggiunge una velocità costante e poi rallenta per raggiungere il suo stato finale. Questo movimento in inglese si chiama “easing” e da qui possiamo definire diversi tipi di animazioni. La transizione “ease”  nelle animazioni css3 è di default e non c’è bisogno di specificarla. Se vogliamo modificare questo movimento possiamo usare questi tipi di transizioni:

  1. lineare, – Cubic Bezier  0, 0, 1, 1;
  2. ease – Cubic Bezier  0.25, 0.1, 1.25, 1;
  3. ease-in – Cubic Bezier  0.42, 0, 1, 1;
  4. ease-out – Cubic Bezier  0, 0,0.58, 1;
  5. ease-in-out – Cubic Bezier  0.42, 0, 0.58, 1;
Questi movimenti seguono una curva ( Bezier Curves ) e hanno un angolo di rotazione diverso e quindi hanno differenti movimenti. Per maggiori dettagli leggi questo articolo. Se invece vuoi vedere gli effetti delle diverse transizione su un immagine questo è un ottimo tool creato dal web designer Matthew Lein

Le proprietà animabili

È importante conoscere tutte le proprietà css animabili con le transizioni per poter creare animazioni efficaci ed accattivanti.
La lista di tutte le proprietà animabili è contenuta in questo articolo.
 Tenendo conto di tutti questi elementi, possiamo ottenere questo. Io mi sono divertita con 9 effetti diversi animando sia l’immagine, sia il testo e sia un altro contenitore posto sopra l’immagine che può essere realizzato con gli pseudo elementi :before e :after. Inoltre ho aggiunto delle didascalie.
 La didascalia viene aggiunta con i tag css3 caption e figcaption. L’immagine deve essere contenuta nel tag

<figure></figure>

ed all’interno viene inserita la didascalia con il tag


<figcaption></figcaption>

Se vogliamo animare diverse proprietà di un elemento possiamo creare diverse sequenze separate di transizione. Nell’esempio da me proposto in questo articolo ho creato diverse sequenze separate animando immagine, background, e didascalie, tutte ognuna con un tipo di transizione e con una durata e proprietà animata. Inoltre non solo ho animato l’evento finale ma anche l’evento di ritorno allo stato iniziale. Per poter far questo la transizione deve essere inserita sia nello stato iniziale che nello stato finale generato dal mouse hover.
Nel mio esempio ho cercato di creare animazioni il più possibile diverse tra di loro, un numero limitato esattamente 9 tipi hover effect. Potete immaginare quante infinite possibilità esistono con un po’ di creatività e fantasia e combinando le transizioni e le trasformazioni tra loro. Provate anche voi e vedrete che il risultato sarà completamente diverso dal mio.

Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “EFFETTI HOVER EFFICACI”—

Per piacere seguici e metti mi piace:
alederobertis75
info@alessandraderobertis.it
Nessun Commento

Pubblica un commento