Andrea Giammarchi ha desarrollado un Javascript que realiza el efecto liquido igual que en ActionScript, este script tan solo pesa 1.2kb y el efecto lo soportan todos los navegadores incluyendo IE6 (aunque el efecto en este navegador sale un poco pixeleado).
El funcionamiento de este script es muy simple, un div se expande con la imagen como fondo mientras una imagen igual en movimiento se extiende en dirección opuesta.

Para realizar este efecto solo basta con descargarnos el script.
Ahora podremos configurar los parámetros después de incluir el js descargado mediante este script:
var fx = Liquid({
// ruta de la imagen para el efecto
src:"firefox.png",
// contenedor para el efecto
target: document.getElementById("fx")
// direccion: left, right, bottom, top
direction: "left",
// porcentaje de expancion de la imagen
scale: 2000,
// velocidad
speed: 10,
// optional callback, will be executed at the end
callback:function(){alert("it's Liquid!")},
// optional onload to perform some operation
// after the image has been loaded
onload:function(){/*FX not started yet*/},
// optional reverse property
// performed only over a precedent liquid FX
reverse:true
});
// fx variable will have two methods
// fx.pause()
// to stop the animation
// fx.play()
// to re-enable it after a pause
// these two effects are available only
// during animation time, removed
// before optional callback call
Eso es todo, podemos probarlo en todos los navegadores(incluyendo IE6), que les pareció?
Tags:
Posteado el: 25/09/2009
por: Craftyman

Comentarios