jQuery

【jQuery】jQuery.animateメソッドを使用してアニメーション化mb.CSSAnimate

December 17, 2016
jquery_mb_cssanimate

mb.CSSAnimateはCSS3トランジッションの代わりにjQuery.animateメソッドを使用してアニメーション化します。

the “DIV” code:

                <div class="test">
                    <div class="test one"></div>
                    <div class="test two"></div>
                    <div class="test three"></div>

                    <div class="test one"></div>
                    <div class="test two"></div>
                    <div class="test three"></div>

                    <div class="test one"></div>
                    <div class="test two"></div>
                    <div class="test three"></div>

                    <div class="test one"></div>
                    <div class="test two"></div>
                    <div class="test three"></div>
                </div>
       

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();
                    })
                })
            };
ダウンロードページ