みかづきブログ その3

3ヶ月つづけてみました。

jQueryでボールをバウンドさせる

ちょいと違和感があるような気もしますが、ぼよーんぼよーんとバウンドさせてみました。
easeOutSineとeaseInSineをつないで放物線的な動きをつくり、
ボールの変形とmarginの調整を同時に行うことでぼよーん感を演出しようとしています。


(function(win, doc, $) {

    "use strict";
    
    var $ball = $("#ball");
    
    (function jump() {
        $ball.animate({
            marginLeft: -50,
            width: 100,
            height: 100,
            bottom: 300
        }, 800, "easeOutSine").
              animate({bottom: 0}, 800, "easeInSine").

              // ぼ
              animate({
                  marginLeft: -60,
                  width: 120,
                  height: 80
              }, 80).

              // ...
              delay(80).

              // よーん
              animate({
                  marginLeft: -40,
                  width: 80,
                  height: 120
              }, 80, jump);

    })();
    
})(this, document, $);




ツイッターやってます!