Da qualche anno le pagine web sono state arricchite da effetti di transizione creati mediante Javascript. Sto parlando di effetti come il cambiamento graduale dello sfondo di un oggetto al passaggio del mouse, la dissolvenza delle immagini ecc. ecc.. Nella nuova specifica CSS è stato inserito un modulo (http://www.w3.org/TR/css3-transitions) per poter realizzare tali animazioni con un utilizzo di Javascript pressochè nullo.

Nota: le transitions per ora sono utilizzabili e visibili solo su browser basati su WebKit (quindi Safari e Chrome) o di nuovissima generazione (Firefox 4 e Opera 11). Per godere appieno degli esempi mostrati nell' articolo vi consigliamo la visione del sito con uno di questi browser.

 

Come usare le transizioni

Implementare le transizioni è davvero molto semplice e può avvenire attraverso due sintassi. Questa è la versione compatta, la forma estesa sarà spiegata nel capitolo sulle transizioni multiple. Nel vostro CSS sull'elemento che volete animare vi basterà aggiungere il seguente codice:

#id_elemento {<br />         -webkit-transition: caratteristica_da_modificare  tempo_transizione  funzione_di_timing  ritardo;<br />         -o-transition: caratteristica_da_modificare  tempo_transizione  funzione_di_timing  ritardo;<br />         -moz-transition: caratteristica_da_modificare  tempo_transizione  funzione_di_timing  ritardo;<br />         transition: caratteristica_da_modificare  tempo_transizione  funzione_di_timing  ritardo;<br />    }

Analizziamo  il codice appena riportato. La caratteristica da modificare è ciò che desiderate modificare tramite l'animazione ( es. color, opacity, background-color… ). Nel caso di più caratteristiche è possibile usare la parola chiave all.

Il tempo di transizione è la durata effettiva dell'animazione ed è espressa in secondi e si indica nella forma Xs dove X è il numero di secondi. La funzione di timing è l'unica parte ostica delle transizioni. Il w3c la definisce come il modo di calcolare i valori intermedi durante la transizione. In pratica permette di di cambiare la velocità della transizione durante la sua durata.


passa il mouse sopra per attivare l'animazione

Quelle mostrate sono le cinque funzioni di timing prestabilite e il loro comportamento. Per personalizzare la funzione di timing si può usare la sintassi cubic-bezier(p0, p1, p2, p3). Se non si specifica viene utilizzata la funzione ease.
Il ritardo indica dopo quanto tempo l'animazione inizia. Il valore va espresso in secondi nello stesso modo illustrato per la durata.
L'ultimo tassello per completare le animazioni è inserire nel CSS l'aspetto finale dell'oggetto una volta finita la transizione. Per continuare l'esempio precedente, se ad esempio volessimo cambiare il colore dello sfondo quando il mouse è sopra all'oggetto, avremo:

#id_elemento:hover {<br />         background-color: #41ac30;<br />    }

Qui riporto il codice per uno dei "quadratini" animati, in quanto negli altri cambia solo la funzione di timing. 
Dato che l'animazione và applicata a più oggetti è consigliabile creare una classe apposta ("mosso" in questo caso) e, al passaggio del mouse sul contenitore, applicarla tramite javascript a tutti i figli. Per farlo ho utilizzato JQuery che semplifica molto il lavoro.

/* Parte html e javascript */<br />    <br />    <body><br />       <div id="container" style=" width: 400px; height 300px;"><br />             <div id="ease">ease</div><br />       </div><br />       <script><br />       $("#container").mouseover( function () {<br />          $("#container > div").toggleClass("mosso");<br />       });<br />       $("#container").mouseout( function () {<br />          $("#container > div").toggleClass("mosso");<br />       });<br />       </script><br />    </body><br />    <br />    /* Parte CSS */<br />    <br />    #ease{<br />        border: 3px solid #b959fc;<br />        width: 50px;<br />        height: 50px;<br />        position: fixed;<br />        left: 15px;<br />        top: 13px;<br />        -webkit-transition: all 5s ease;<br />        -moz-transition: all 5s ease;<br />        -o-transition: all 5s ease;<br />        -webkit-transition: all 5s ease;<br />        transition: all 5s ease;<br />    }<br />    .mosso{<br />        -moz-transform: translate(340px, 0px);<br />        -moz-transform-origin: 0% 0%;<br />        -webkit-transform: translate(340px, 0px);<br />        -webkit-transform-origin: 0% 0%;<br />        -o-transform: translate(340px, 0px);<br />        -o-transform-origin: 0% 0%;<br />        -ms-transform: translate(340px, 0px);<br />        transform: translate(340px, 0px);<br />        transform-origin: 0% 0%;<br />        -moz-border-radius: 25px;<br />        border-radius: 25px;<br />        background-color: #ffee00;<br />    }

 

Le transizioni multiple

Le transizioni multiple nascono dall'esigenza di poter assegnare comportamenti diversi ai parametri del nostro oggetto. In questo caso è d'obbligo implementare le transizioni usando la sintassi estesa.

div{<br />       transition-property: proprietà1, proprieta2, proprieta3... ;<br />       transition-duration: tempo1, tempo2, tempo3... ;<br />       transition-timing-function: funzione1, funzione2, funzione3...;<br />       transition-delay: ritardo1, ritardo2, ritardo3...;<br />    <br />       -webkit-transition-property: proprietà1, proprieta2, proprieta3... ;<br />       -webkit-transition-duration: tempo1, tempo2, tempo3... ;<br />       -webkit-transition-timing-function: funzione1, funzione2, funzione3...;<br />       -webkit-transition-delay: ritardo1, ritardo2, ritardo3...;<br />    <br />       -moz-transition-property: proprietà1, proprieta2, proprieta3... ;<br />       -moz-transition-duration: tempo1, tempo2, tempo3... ;<br />       -moz-transition-timing-function: funzione1, funzione2, funzione3...;<br />       -moz-transition-delay: ritardo1, ritardo2, ritardo3...;<br />    <br />       -o-transition-property: proprietà1, proprieta2, proprieta3... ;<br />       -o-transition-duration: tempo1, tempo2, tempo3... ;<br />       -o-transition-timing-function: funzione1, funzione2, funzione3...;<br />       -o-transition-delay: ritardo1, ritardo2, ritardo3...;<br />    }

Purtroppo noterete che il codice è pieno di ripetizioni a causa dei prefissi per i vari browser.  Nel caso vogliate evitare questa seccatura potete usare csscaffold. Di seguito mostriamo un semplice esempio di transizioni multiple e il relativo codice:


    <head><br />            <title>Transizioni multiple</title><br />            <style><br />                div{<br />                    background-color: #90e88c;<br />                    border: 5px solid #acd6ec;<br />                    width: 100px;<br />                    height: 100px;<br />                    transition-property: background-color, border, width, height;<br />                    transition-duration: 2s, 5s, 1s, 8s;<br />                    transition-timing-function: ease-in, linear, ease-out, ease;<br />                    transition-delay: 1s, 2s, 5s, 0s;<br />                    /*Qui vanno le varie ripetizioni -moz- -o- -webkit- che tralascio per motivi di spazio*/<br />                }<br />                div:hover{<br />                    background-color: #1f5cc2;<br />                    border: 10px dotted #41ac30;<br />                    width: 200px;<br />                    height: 40px;<br />               }<br />            </style><br />        </head><br />        <body><br />             <div>Passa qui il mouse</div><br />        </body>

Consiglio vivamente di non esagerare con le transizioni multiple in quanto difficili da gestire.  Per chi fosse interessato qui  può trovare il codice degli esempi in versione integrale.

Detto questo non mi resta che salutarvi e augurarvi buon lavoro. Alla prossima!

The following two tabs change content below.