Itt a megoldás a hover események kezelésére. Amikor az egérkurzort rávisszük egy elemre, akkor ahhoz bizonyos funkciókat rendelhetünk, mint például méret növelés, szín megváltoztatás, egyebek. Most már animálhatjuk is ezt az eseményt.Ez a mostani megoldás szigorúan JavaScript nélkül animál. Ez itt a lényeg.Ez a technológia már nem egy nagy újdonság, viszont eddig nem támogatták a böngészők.Sajnos a Firefox jelenleg sem mindigi támogatja. (Illetve a Firefox 4 -ben már benne lesznek a szükséges cuccok.)Az animáls a "transform" attributummal és ehhez kapcsolódó értékekkel történik.Animálhatunk képeket is, így olyan lesz, mint a flash.
box 1
box 2
box 3
box 4
Részletek:
box 1 |
Jobbra tolódik: -webkit-transform: translate(3em,0); |
box 2 |
30 fokkal elfordul: -webkit-transform: rotate(30deg); |
box 3 |
Balra lefele tolódik: -webkit-transform: translate(-3em,1em); |
box 4 |
Kiemelkedik: -webkit-transform: scale(2); |
Kódja:
Leírás: Sandalphon
2011.febr.6.
|