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.
Get the code

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 = 10 + (5 * Math.floor((Math.random() * 15)));
            var h = 10 + (5 * 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 duration = 1000 + Math.floor((Math.random() * 5000));

            //here is the CSSAnimate :-)
            el.CSSAnimate({
            y: t,
            x: l,
            width: w,
            height: h,
            skew: r/3,
            "border-radius": Math.floor(Math.random() * el.width()),
            "rotate": r,
            "transform-origin": Math.floor(Math.random() * 100)+"% "+Math.floor(Math.random() * 100)+"%",
            "background-color": "rgba("+Math.floor(Math.random() * 255)+","+Math.floor(Math.random() * 255)+","+Math.floor(Math.random() * 255)+","+(.6+Math.random()*.4)+")"
            }, duration, 0, "linear", function() {
            el.test();
            })
            })
            };


            $(".test").test();

        
		

back to pupunzi experiments