jquery.mb.CSSAnimate demo

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