.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

目次

概要

効果音アニメーションについて。

詳細

効果音

jQuery Plugin - Ion.Sound

  • ブラウザのサポートするMP3やOOGを再生。
  • 最新はHTML5 audio要素にフォールバックする。

HTML5のaudio要素とAPI

HTML5のaudio要素とJavaScript APIで制御する。

<script>
  var audio = document.getElementById("audio"); // audioの取得
  audio.play(); // mp3の再生
</script>
<body>
  <audio id="audio">
    <source src="xxxxx.mp3" preload="auto">
  </audio>
</body>

アニメーション

jQuery - Effects の .animate()メソッドを使用。

.animate() メソッドで実装可能。

以下は、ボタン押下時のアニメーション+効果音。

$(function() {
  var audio = document.getElementById("audio"); // audioの取得
  $('.imgbutton').on('click', function() {
    audio.play(); // mp3の再生
    $(this).animate(
      {
        width: '100px',   // 小さくしたときのサイズ(幅)
        height: '110px'   // 小さくしたときのサイズ(高さ)
      },
      {
        duration: 50,    // 小さくするときにかかる時間(ms)
        complete: function() {
          $(this).animate(
          {
            width: '175px', // 大きくしたときのサイズ(幅)
            height: '220px' // 大きくしたときのサイズ(高さ)
          },
          {
            duration: 100,   // 大きくしたときかかる時間(ms)
            complete: function() {
            $(this).animate(
            {
              width: '150px', // 元のサイズ(幅)
              height: '165px' // 元のサイズ(高さ)
            },
            {
              duration: 100   // 元のサイズに戻るときにかかる時間(ms)
            });
          }
        });
      }
    });
  });
});
  • 拡大・縮小アニメーションの対処
    横並びの要素が拡大・縮小アニメーションの影響を受ける場合、
    要素を"float:left;"のDIVで囲むと影響を受けなくなる。

HTML5のcanvas要素とAPI


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2021-04-14 (水) 12:25:26 (34d)