Efecto liquido de imagen con Javascript

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

También te puede interesar

One Comment

  1. Betty
    jun 08, 2010 @ 00:12:41

    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 @ WebReflectionDEMO 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);