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