Anche il sito Web più attentamente orchestrato caricato con effetti speciali può diventare antiquati e noioso se lasciato inalterate nel tempo. Dici di fare un sito noioso non richiede l'aggiunta di librerie JavaScript complesse, oggetti Flash o altre estensioni dei browser di terze parti. Se si scrive codice per Google Chrome, è possibile utilizzare il motore di rendering WebKit e CSS3 per creare spettacolari effetti di mouseover che richiedono poca o nessuna codifica per generare.

Rotazione

Immaginate spostando il mouse su un'immagine di un poster e guardarlo girare in 3-d e visualizzare l'altro lato. Creare questo effetto mouseover in Chrome utilizzando l'attributo ruota della proprietà webkit-transform. Questa proprietà ha diversi altri attributi che consentono di modificare un oggetto pagina Web quando si verificano mouseovers. Oggetti utilizzando l'attributo ruota possono ruotare orizzontalmente, verticalmente e anche rotazione attorno a un asse. Controllare il numero di gradi di rotazione impostando un valore, ad esempio "30 gradi" per l'attributo di rotazione.

Rappresentazione in scala

Un Web developer crea un effetto zoom animato in un normale browser scrivendo codice JavaScript che ingrandisce un oggetto. Generare lo stesso effetto all'interno di Chrome senza scrivere una sola linea di codice. Attributo di scala di webkit-transform proprietà rende possibile questo effetto. L'attributo di scala accetta un parametro di scala ad esempio 2. Tale valore indica Chrome come scalare un oggetto di tale valore. Questo effetto ha molti usi, tra cui Mostra ai visitatori del sito visualizzazioni più grandi delle immagini quando si librano su di loro. Invece di fare un'immagine scompaiono improvvisamente, è possibile utilizzare l'attributo di scala per farla scomparire lentamente.

Interpolazione e Timing

WebKit di Chrome ha un attributo speciale denominato - webkit-transition-timing-function. Impostando i suoi valori di "facilità-out" o "ease-in" modo immagini appaiono o scompaiono gradualmente. Allentamento rende gli oggetti animati Web pagina appaiono più realistiche quando è in movimento. L'attributo - webkit-transition-duration accetta un valore ad esempio 300ms. Questo valore, espresso in millisecondi, imposta la durata dell'effetto di interpolazione.

Più effetti di Mouseover

Un semplice menu rotante è impressionante. Tuttavia, se fate un piccolo menu svanire in vista, zoom, ruotare e si fanno più grandi quando gli utenti mouse sopra uno, possono restituire al tuo sito solo per vedere l'effetto nuovo. Creare più effetti di mouseover elencandole in una singola istruzione di CSS. L'esempio seguente genera un oggetto ruotare di 180 gradi e lo zoom di un fattore di quattro quando si verifica un passaggio del mouse:

Rotate(180deg) scale(4);

Che si stanno creando effetti mouseover singolo o effetti combinati, si genereranno li a tempo di record una volta che si impara a sfruttare la potenza del motore di rendering WebKit di Chrome.