みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

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, $);




https://twitter.com/ki_230/status/651331561338441729

ツイッターやってます!