Qualcuno mi ha chiesto come poter realizzare nel proprio sito una animazione con una immagine come  come quella che vedete qui in basso a sinistra.

Ecco allora questo breve tutorial. In realtà la cosa è proprio semplicissima ed utilizza le proprietà dei css3, ormai ampiamente supportate da tutti i browser moderni.

Niente javascript, jquery, mootools, flash o qualsiasi altro script. Quindi massima leggerezza e compatibilità.

 Si prende una immagine di adeguata dimensione e fattezza e la si incolla in un modulo di tipo html personalizzato. Si pubblica questo modulo in una adeguata posizione del template. Io nel protostar l'ho pubblicata nella posizione debug. Dobbiamo aver cura di inserire l'immagine dentro un div avente una determinata classe a scelta. Io l'ho chiamata apina.Poi la dobbiamo solo formattare con un  paio di regolette css che, se ispezionate il codice con firebug, dovreste scoprire da soli.

Con questa:

div.apina {
  bottom: -210px; <-- la sposto fuori dallo schermo a sinistra
  left: -130px;  <-- la sposto sotto lo  schermo
  position: fixed; <-- la costringo in una posizione assoluta e fissa nel monitor anche allo scrolling
  transform: scale(0.6) rotate(45deg); <--- la riduco al 60 per cento e la piego di 45 gradi
  transition-duration: 0.5s; <-- stabilisco in mezzo secondo il tempo dell'animazione
  z-index: 100; <--- la tengo sopra agli altri elementi nella pagina
}

mentre con questa:

div.apina:hover { <--- quando arriva il mosuse sopra esegui le regole qui sotto
    bottom10px; <--- metti l'immagine a 10px dal bordo sinistro
    left10px;       <-- nonchè a 10px dal fondo del monitor
    transformscale(1) rotate(0deg); <--- torna alla normale dimensione e raddrizzati
    transition-duration0.3s; <--- il tutto impiegando circa un terzo di secondo
}

al puntatore del mouse sopra l'immagine avverrà il cambiamento. Vi sarà adesso chiaro che potrete giocare in diversi modi con questi valori per ottenere l'effetto desiderato. Io ho linkato all'immagine un mio sito esterno ma potrete ovviamente linkare anche pagine dello stesso sito, ad esempio per mandare l'utente in una speciale pagina.

Buone animazioni!

Alla prossima.

tonicopi

 

Share
comments
apina

 

Test Floating

Test floating

Su questo sito usiamo i cookies, anche di terze parti. Navigandolo accetti.