ボタン押したらサンキューという音声と共にハートマークがでるような動きを付けたい。jQueryとjQuery UIで。

ボタン押したらサンキューという声と共にハートマークが上に飛びでるようにしたい

したい。インタラクションがあるのって楽しい。
押したらアクションがある。

mikubook.comに、FAVEというボタンがあるが、押すとミク様がサンキューと言ってくれる。
とても心が温まるし、テンにも昇る気持ちだ。

実装が難しいと思ったけど、jQuery、jQuery UIのおかげで簡単なお仕事。

サンプル

サンプルページはここ。
ボタンを押すとサンキューという音声とハートマークが上に飛び出る。

動き

こんな感じ。

解説

main.jsの内容

main.js

$(document).ready(function() {
    $("button").click(function() {
      var _that = this;
      var audio = new Audio("thankyou.wav");
      if ($("img[name=heart]")){
        $("img[name=heart]").remove();
      }
      var heart = $("<img>").attr({
        name: "heart",
        src: "heart.png",
        width: "24px",
        height: "24px"
      });

      $(document.body).append(heart);

      $(heart).load(function() {
        audio.play();
        heart.position({
          my: 'center',
          at: 'center',
          of: $(_that)
        });

        $(heart).animate({
          opacity: 0.10,
          top: "-=100"
        }, 800, function() {
          $(heart).remove();
      });
    });
  });
});

なんのことはなく、簡単に実装できる。jQuery及びjQuery UIは良い。読み出さないといけないファイルサイズがアレな気もするが...

1. img要素を作成し、ハートマーク画像をsrc属性に設定する。
2. 初期位置は画像よ見出し後にボタンの中心位置に移動させる。
3. 画像を読み出したらthankyou.wavを再生する。
4. アニメーションはanimateメソッドで、半透明度は0.10、
5. 画像位置は100px x軸方向に上部まで移動、800ミリ秒間の間にアニメーションさせる。
6. 終了したら要素そのものを削除する。

そんな流れ。

thankyou.wavはAudacityを使って自分の声をピッチ高めたり速度早めたりして加工した。