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.
Descargar
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ó?
Ver demo Descargar
hola te felicito por la página, no se si me podrías ayudar trate de hacer el efecto pero no me resulta, primero descargue liquid.php, luego liquid.html, cambie el nombre de la imagen y configure los parametros dentro de liquid.javascript. Pero en la pagian no aparece la imagen, me podrías decir que hize mal. Gracias
Liquid FX by Andrea Giammarchi
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #EEE;
overflow: hidden;
}
ul {
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
margin: 0;
padding: 0;
list-style: none;
width: 100%;
height: 240px;
position: absolute;
top: 50%;
margin-top: -120px;
padding-left: 8%;
background: #FFF;
}
li {
width: 22%;
float: left;
}
#about {
font-family: Verdana, Helvetica, sans-serif;
font-size: 8pt;
position: absolute;
top: 50%;
padding: 0;
margin: 132px auto auto auto;
left: 50%;
margin-left: -160px;
}
onload = function(){
var li = document.getElementsByTagName(“li”),
bottom = li[0],
top = li[1],
right = li[2],
left = li[3]
;
Liquid({
scale:2000,
src:”image1.jpg”,
target:bottom,
direction:”bottom”,
callback:function(config){
config.target = top;
config.direction = “top”;
config.callback = function(){
config.target = right;
config.direction = “right”;
config.callback = function(){
config.target = left;
config.direction = “left”;
delete config.callback;
Liquid(config);
};
Liquid(config);
};
Liquid(config);
}
});
};
Liquid FX by Andrea Giammarchi @ WebReflection – DEMO No. 2
*******************************************************************
php : liquid.php
/*(C) Andrea Giammarchi*/(function(d,e){function h(m){function q(){k.removeChild(s);s=i=null;m.interval=0;m.callee=m.pause=m.play=null;if(m.callback){m.callback(m)}}var k=m.target.appendChild(m.document.createElement(“div”)),j=k.cloneNode(true),l=this.width,v=this.height,s=this,w=k.style,t=j.style,i=s.style,p=m.scale||2000,o=m.speed||10,n,u,r;g(w,t,i);f(w,t);a(t,i);w.position=”relative”;w.width=l+”px”;w.height=v+”px”;w.overflow=”hidden”;i.zIndex=1;t.zIndex=2;p/=100;switch(m.direction){case”top”:t.height=0+”px”;t.width=l+”px”;i.top=(u=v)+”px”;s.setAttribute(“width”,l);s.setAttribute(“height”,d(p*v));n=0;p=o/p;m.interval=setTimeout(m.callee=function(){if(n<v){u-=o;i.top=d(u+n)+"px";if(u<0){t.height=d(n+=p)+"px"}m.interval=setTimeout(m.callee,15)}else{q()}},15);break;case"bottom":t.height=0+"px";t.width=l+"px";t.top=v+"px";i.top=(u=-d(p*v))+"px";s.setAttribute("width",l);s.setAttribute("height",-u);l=-d(p*v-v);n=0;p=o/p;m.interval=setTimeout(m.callee=function(){if(n<v){u+=o;i.top=d(u-n)+"px";if(l<u){t.height=(r=d(n+=p))+"px";t.top=(v-r)+"px"}m.interval=setTimeout(m.callee,15)}else{q()}},15);break;case"right":t.width=0+"px";t.left=l+"px";t.height=v+"px";i.left=(n=-d(p*l))+"px";s.setAttribute("width",-n);s.setAttribute("height",v);v=-d(p*l-l);u=0;p=o/p;m.interval=setTimeout(m.callee=function(){if(u<l){n+=o;i.left=d(n-u)+"px";if(v<n){t.width=(r=d(u+=p))+"px";t.left=(l-r)+"px"}m.interval=setTimeout(m.callee,15)}else{q()}},15);break;default:t.width=0+"px";i.top="0px";t.height=v+"px";i.left=(n=l)+"px";s.setAttribute("width",d(p*l));s.setAttribute("height",v);u=0;p=o/p;m.interval=setTimeout(m.callee=function(){if(u<l){n-=o;i.left=d(n+u)+"px";if(n<=0){t.width=d(u+=p)+"px"}m.interval=setTimeout(m.callee,15)}else{q()}},15);break}t.background=(m.background||"transparent")+" url("+m.src+") no-repeat "+(m.direction||"left");k.appendChild(s);k.appendChild(j)}function b(m){function q(){l.parentNode.removeChild(l);l.removeChild(s);l.removeChild(j);l=j=s=w=t=i=null;m.interval=0;m.callee=m.pause=m.play=null;if(m.callback){m.callback(m)}}var j=m.target.getElementsByTagName("div"),l=j[0],j=j[1],s=m.document.createElement("img"),w=l.style,t=j.style,i=s.style,k=parseInt(w.width,10),v=parseInt(w.height,10),p=m.scale||2000,o=m.speed||10,n,u,r;a(i);g(i);i.zIndex=1;t.backgroundPosition=m.direction||"left";p/=100;s.onload=function(){switch(m.direction){case"top":s.setAttribute("width",k);s.setAttribute("height",k=d(p*v));i.top=(u=-k+v)+"px";n=0;p=o/p;m.interval=setTimeout(m.callee=function(){if(u+n<v){u+=o;i.top=d(u+n)+"px";if(-v<(r=d(n-=p))){t.height=(v+r)+"px"}m.interval=setTimeout(m.callee,15)}else{q()}},15);break;case"bottom":s.setAttribute("width",k);s.setAttribute("height",k=d(p*v));k+=n=v;u=0;p=o/p;m.interval=setTimeout(m.callee=function(){if(-u<k){u-=o;i.top=d(u+(v-n))+"px";t.top=(v-(r=d(n-=p)))+"px";if(0<r){t.height=r+"px"}m.interval=setTimeout(m.callee,15)}else{q()}},15);break;case"right":s.setAttribute("height",v);s.setAttribute("width",v=d(p*k));n=u=0;p=o/p;m.interval=setTimeout(m.callee=function(){if(-n-u<v){i.left=d((n-=o)+u)+"px";if((r=d(u+=p))<k){t.width=(k-r)+"px";t.left=r+"px"}m.interval=setTimeout(m.callee,15)}else{q()}},15);break;default:s.setAttribute("height",v);s.setAttribute("width",n=d(p*k));i.left=(n=-(n-k))+"px";u=0;p=o/p;m.interval=setTimeout(m.callee=function(){if(n-u<k){i.left=d((n+=o)-u)+"px";r=d(u+=p);if(r<k){t.width=(k-r)+"px"}m.interval=setTimeout(m.callee,15)}else{q()}},15);break}};l.insertBefore(s,j);s.src=m.src}function g(){for(var j=0,k=arguments.length;j<k;++j){arguments[j].padding=arguments[j].margin=arguments[j].border="0px"}}function f(){for(var j=0,k=arguments.length;j<k;++j){arguments[j].fontSize=arguments[j].lineHeight="0px";arguments[j].textAlign="left"}}function a(){for(var j=0,k=arguments.length;j<k;++j){arguments[j].top=arguments[j].left="0px";arguments[j].position="absolute"}}function c(j){if(j.reverse){b(j)}else{var i=(j.document||(j.document=document)).createElement("img");i.onload=function(){i.removeAttribute("onload");if(j.onload){j.onload(i)}h.call(i,j)};i.src=j.src;j.pause=function(){clearTimeout(j.interval)};j.play=function(){j.interval=setTimeout(j.callee,15)}}return j}e.Liquid=c})(Math.round,window);
*******************************************************************
javascript : liquid.javascript
(function(round, window){
/** Liquid – Pure JavaScript Liquid Effect
* @author Andrea Giammarchi
* @blog webreflection.blogspot.com
* @license Mit Style License
* @version 1.4 – less DOM, smaller, faster
* @compatibility all but Safari <= 2 and IE4
*/
function onload(config){
function onload(){
wrap.removeChild(img);
img = $img = null;
config.interval = 0;
config.callee = config.pause = config.play = null;
if(config.callback)
config.callback(config)
;
};
var wrap = config.target.appendChild(config.document.createElement("div")),
div = wrap.cloneNode(true),
width = this.width,
height = this.height,
img = this,
$wrap = wrap.style,
$div = div.style,
$img = img.style,
scale = config.scale || 2000,
speed = config.speed || 10,
left, top, $
;
margin($wrap, $div, $img);
fontSize($wrap, $div);
position($div, $img);
$wrap.position = "relative";
$wrap.width = width + "px";
$wrap.height = height + "px";
$wrap.overflow = "hidden";
$img.zIndex = 1;
$div.zIndex = 2;
scale /= 100;
switch(config.direction){
case "top":
$div.height = 0 + "px";
$div.width = width + "px";
$img.top = (top = height) + "px";
img.setAttribute("width", width);
img.setAttribute("height", round(scale * height));
left = 0;
scale = speed / scale;
config.interval = setTimeout(config.callee = function(){
if(left < height){
top -= speed;
$img.top = round(top + left) + "px";
if(top < 0)
$div.height = round(left += scale) + "px"
;
config.interval = setTimeout(config.callee, 15);
} else
onload()
;
}, 15);
break;
case "bottom":
$div.height = 0 + "px";
$div.width = width + "px";
$div.top = height + "px";
$img.top = (top = -round(scale * height)) + "px";
img.setAttribute("width", width);
img.setAttribute("height", -top);
width = -round(scale * height – height);
left = 0;
scale = speed / scale;
config.interval = setTimeout(config.callee = function(){
if(left < height){
top += speed;
$img.top = round(top – left) + "px";
if(width < top){
$div.height = ($ = round(left += scale)) + "px";
$div.top = (height – $) + "px";
};
config.interval = setTimeout(config.callee, 15);
} else
onload()
;
}, 15);
break;
case "right":
$div.width = 0 + "px";
$div.left = width + "px";
$div.height = height + "px";
$img.left = (left = -round(scale * width)) + "px";
img.setAttribute("width", -left);
img.setAttribute("height", height);
height = -round(scale * width – width);
top = 0;
scale = speed / scale;
config.interval = setTimeout(config.callee = function(){
if(top < width){
left += speed;
$img.left = round(left – top) + "px";
if(height < left){
$div.width = ($ = round(top += scale)) + "px";
$div.left = (width – $) + "px";
};
config.interval = setTimeout(config.callee, 15);
} else
onload()
;
}, 15);
break;
default:
$div.width = 0 + "px";
$img.top = "0px";
$div.height = height + "px";
$img.left = (left = width) + "px";
img.setAttribute("width", round(scale * width));
img.setAttribute("height", height);
top = 0;
scale = speed / scale;
config.interval = setTimeout(config.callee = function(){
if(top < width){
left -= speed;
$img.left = round(left + top) + "px";
if(left <= 0)
$div.width = round(top += scale) + "px"
;
config.interval = setTimeout(config.callee, 15);
} else
onload()
;
}, 15);
break;
};
$div.background = (config.background || "transparent") + " url(" + config.src + ") no-repeat " + (config.direction || "left");
wrap.appendChild(img);
wrap.appendChild(div);
};
function $onload(config){
function onload(){
wrap.parentNode.removeChild(wrap);
wrap.removeChild(img);
wrap.removeChild(div);
wrap = div = img = $wrap = $div = $img = null;
config.interval = 0;
config.callee = config.pause = config.play = null;
if(config.callback)
config.callback(config)
;
};
var div = config.target.getElementsByTagName("div"),
wrap = div[0],
div = div[1],
img = config.document.createElement("img"),
$wrap = wrap.style,
$div = div.style,
$img = img.style,
width = parseInt($wrap.width, 10),
height = parseInt($wrap.height, 10),
scale = config.scale || 2000,
speed = config.speed || 10,
left, top, $
;
var fx = Liquid({
src:"image1.jpg",
target: document.getElementById("fx")
direction: "left",
scale: 2000,
speed: 10,
onload:function(){/*FX not started yet*/},
reverse:true
});
position($img);
margin($img);
$img.zIndex = 1;
$div.backgroundPosition = config.direction || "left";
scale /= 100;
img.onload = function(){
switch(config.direction){
case "top":
img.setAttribute("width", width);
img.setAttribute("height", width = round(scale * height));
$img.top = (top = -width + height) + "px";
left = 0;
scale = speed / scale;
config.interval = setTimeout(config.callee = function(){
if(top + left < height){
top += speed;
$img.top = round(top + left) + "px";
if(-height < ($ = round(left -= scale)))
$div.height = (height + $) + "px"
;
config.interval = setTimeout(config.callee, 15);
} else
onload()
;
}, 15);
break;
case "bottom":
img.setAttribute("width", width);
img.setAttribute("height", width = round(scale * height));
width += left = height;
top = 0;
scale = speed / scale;
config.interval = setTimeout(config.callee = function(){
if(-top < width){
top -= speed;
$img.top = round(top + (height – left)) + "px";
$div.top = (height – ($ = round(left -= scale))) + "px";
if(0 < $)
$div.height = $ + "px"
;
config.interval = setTimeout(config.callee, 15);
} else
onload()
;
}, 15);
break;
case "right":
img.setAttribute("height", height);
img.setAttribute("width", height = round(scale * width));
left = top = 0;
scale = speed / scale;
config.interval = setTimeout(config.callee = function(){
if(-left – top < height){
$img.left = round((left -= speed) + top) + "px";
if(($ = round(top += scale)) < width){
$div.width = (width – $) + "px";
$div.left = $ + "px";
};
config.interval = setTimeout(config.callee, 15);
} else
onload()
;
}, 15);
break;
default:
img.setAttribute("height", height);
img.setAttribute("width", left = round(scale * width));
$img.left = (left = -(left – width)) + "px";
top = 0;
scale = speed / scale;
config.interval = setTimeout(config.callee = function(){
if(left – top < width){
$img.left = round((left += speed) – top) + "px";
$ = round(top += scale);
if($ < width)
$div.width = (width – $) + "px"
;
config.interval = setTimeout(config.callee, 15);
} else
onload()
;
}, 15);
break;
};
};
wrap.insertBefore(img, div);
img.src = config.src;
};
function margin(){
for(var i = 0, length = arguments.length; i < length; ++i)
arguments[i].padding = arguments[i].margin = arguments[i].border = "0px"
;
};
function fontSize(){
for(var i = 0, length = arguments.length; i < length; ++i){
arguments[i].fontSize = arguments[i].lineHeight = "0px";
arguments[i].textAlign = "left";
};
};
function position(){
for(var i = 0, length = arguments.length; i < length; ++i){
arguments[i].top = arguments[i].left = "0px";
arguments[i].position = "absolute";
};
};
function Liquid(config){
if(config.reverse)
$onload(config)
; else {
var img = (config.document || (config.document = document)).createElement("img");
img.onload = function(){
img.removeAttribute("onload");
if(config.onload)
config.onload(img)
;
onload.call(img, config);
};
img.src = config.src;
config.pause = function(){clearTimeout(config.interval)};
config.play = function(){config.interval = setTimeout(config.callee, 15)};
};
return config;
};
window.Liquid = Liquid;
})(Math.round, window);
Comments are closed.