Skip to content

DNET_JavaScriptEffects

Jump to bottom
nishi_74322014 edited this page Sep 11, 2026 · 1 revision

JavaScriptのエフェクト処理

概要

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

詳細

効果音

jQuery Plugin - Ion.Sound

HTML5のaudio要素とAPI

HTML5（HTMLの該当節を参照）の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;"（CSSの該当節を参照）のDIVで囲むと影響を受けなくなる。

HTML5のcanvas要素とAPI

HTML5（HTMLの該当節を参照）のcanvas要素とAPI。

移行メモ

  • 元 Wiki では見出しそのものが他ページへのリンクになっていた箇所 （「HTML5のaudio要素とAPI」「jQuery - Effects の .animate()メソッドを使用。」 「HTML5のcanvas要素とAPI」）は、GitHub Wiki では見出しからアンカが 生成されるため、見出しをプレーン・テキストとし、リンクは直下の本文に置いた。
  • PukiWiki のページ内アンカ（#xxxxxxxx）は GitHub Wiki では再現できないため、 同一ページ内のアンカは見出しから生成されるアンカに張り替え、 他ページのアンカを指すリンクは「〜（ページ名 の該当節を参照）」の形に置き換えた。
  • 「HTML5のcanvas要素とAPI」は元 Wiki では本文が無かったため、1 行を補った。

Tags: 移行, JavaScript, エフェクト, 効果音, アニメーション, jQuery, HTML5, audio, canvas

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

NetDevInfraWiki

マイクロソフト系技術情報 Wiki
Open 棟梁 Wiki

（未着手）

開発基盤部会 Wiki

移行管理: DONE ／ TODO

Clone this wiki locally