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.
Download This Plugin
here is the call for this example:
the "DIV" code:
the function:
$.fn.test = function() {
var cH = $(window).height();
var cW = $(window).width();
return this.each(function() {
var el = $(this);
var w = 30 * (Math.random() * 15);
var h = 30 * (Math.random() * 15);
var t = Math.floor(Math.random() * (cH-h));
var l = Math.floor(Math.random() * (cW-w));
var r = Math.floor(Math.random() * 360);
var duration = 1000 + (Math.random() * 3000);
//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)",
"transform-origin":"50% 50%",
"background":"rgba("+Math.floor(Math.random() * 255)+","+Math.floor(Math.random() * 255)+","+Math.floor(Math.random() * 255)+","+(.6+Math.random()*.4)+")"
}, duration, "ease-out", function() {
el.test();
})
})
};
$(".test").test();
back to pupunzi experiments