Hace unos meses vimos unos scripts que nos permitían emular el dock de MacOSX en nuestras aplicaciones web. Con la llegada de CSS Animations, esta tarea es mucho más fácil.
<html>
<head>
<title>MacOSX Dock CSS Animations</title>
<style type="text/css">
#page { margin-top:10em;}
.dock li {display:inline;}
.dock img {width:96px; opacity: 0.7; -webkit-transition: all 1s ease-in;}
.dock span {position:absolute;top:3em;left:0;opacity:0;-webkit-transition:all 1s ease-out;}
.dock li:hover img, .dock li:hover span{width:128px;opacity:1;}
.dock li:hover span {left:50%;}
</style>
</head>
<body>
<div id="page">
<ul class="dock">
<li><img src="finder.png" alt="Imagen" /><span class="desc">Finder</span></li>
<li><img src="systempreferences.png" alt="Imagen" /><span class="desc">Preferences</span></li>
<li><img src="firefox.png" alt="Imagen" /><span class="desc">Firefox</span></li>
<li><img src="itunes.png" alt="Imagen" /><span class="desc">iTunes</span></li>
<li><img src="terminal.png" alt="Imagen" /><span class="desc">Terminal</span></li>
<li><img src="trash.png" alt="Imagen" /><span class="desc">Papelera</span></li>
</ul>
</div>
</body>
</html>
La clave del efecto es -webkit-transition, una propiedad que los usuarios de Safari 3.1, WebKit ya pueden disfrutar. He montado un pequeño ejemplo de como quedaría (ver con Safari o WebKit).
¿Como funciona?
Si nos fijamos en el código entenderemos el funcionamiento de esta propiedad.
.dock img {width:96px; opacity:0.7; -webkit-transition: all 1s ease-in;}
.dock span {position:absolute;top:3em;left:0;opacity:0;-webkit-transition: opacity 1s linear;}
.dock li:hover img, .dock li:hover span{width:128px;opacity:1;}
.dock li:hover span {left:50%;}
En la definición de estilos de nuestros CSS, además de definir el aspecto de los elementos le añadimos la declaración de la transición que se aplicará a dicho elemento. En la primera línea, aplicamos el tipo all, que durará 1 segundo usando el método ease-in.
Justo en la definición del estilo al pasar por encima del elemento, indicamos el nuevo tamaño/opacidad, en este momento es donde entra en juego la propiedad -webkit-transition, que aplica el efecto desde la propiedad anterior a la definida en el :hover.
5 comentarios, 5 referencias
+
#