Animate using CSS3 transition instead of the default jQuery.animate method.
It provides a fallback to the default animate method if CSS3 is not supported by the browser.
here is the call for this example:
the "DIV" code:
the function:
var cH = $(window).height();
var cW = $(window).width();
$.fn.test = function() {
var cH = $(window).height();
var cW = $(window).width();
return this.each(function() {
var el = $(this);
var w = 10 + (50 * Math.floor((Math.random() * 15)));
var h = 10 + (50 * Math.floor((Math.random() * 15)));
var t = 10 + (Math.floor(Math.random() * (cH-h)));
var l = 10 + (Math.floor(Math.random() * (cW-w)));
var r = Math.floor(Math.random() * 360);
var s = Math.random()*1;
var duration = 2000 + Math.floor((Math.random() * 20000));
var delay = 0;
//here is the CSSAnimate :-)
el.CSSAnimate({
top: t,
left: l,
width: w,
height: h,
"border-radius":Math.floor(Math.random() * 100),
"transform":"rotate("+r+"deg) scale("+s+") skew("+Math.floor(Math.random() *r)+"deg,"+Math.floor(Math.random() *r)+"deg)",
"transform-origin":(Math.random() *100)+"%"+(Math.random() *100)+"%",
"background":"rgba("+Math.floor(Math.random() * 255)+","+Math.floor(Math.random() * 255)+","+Math.floor(Math.random() * 255)+","+(.6+Math.random()*.4)+")"
}, duration,delay, "ease-out",function() {
el.test();
})
})
};
back to pupunzi experiments