JavaScriptのエフェクト処理の変更点

追加された行はこの色です。
削除された行はこの色です。
JavaScriptのエフェクト処理へ行く。
JavaScriptのエフェクト処理の差分を削除
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。

-[[戻る>JavaScript]]
-戻る
--[[JavaScript]]
--[[HTML5 JavaScript API]]

*目次 [#s3004be6]
#contents

*概要 [#tb58f832]
[[効果音>#cf0fca98]]や[[アニメーション>#se421493]]について。

*詳細 [#a7907bb6]

**効果音 [#cf0fca98]

***jQuery Plugin - Ion.Sound [#p142b55c]
-ブラウザのサポートするMP3やOOGを再生。
-最新は[[HTML5 audio要素>#j0565977]]にフォールバックする。

-jQuery Plugin - クリックアクションに効果音を加える - Ion.Sound~
https://webkaru.net/jquery-plugin/ion-sound/

***[[HTML5>HTML#x3122b27]]のaudio要素とAPI [#j0565977]
[[HTML5>HTML#x3122b27]]の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>

-複数の音源データの指定
--HTML JavaScriptでAudioタグを使用し複数の音源データを指定が出来ません... - Yahoo!知恵袋~
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11157174196
><audio> タグを別にして、別の id で管理する。

**アニメーション [#se421493]

***[[jQuery]] - Effects の .animate()メソッドを使用。 [#zb7490ef]
.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#xec6ed76]]"のDIVで囲むと影響を受けなくなる。~

***[[HTML5>HTML#x3122b27]]のcanvas要素とAPI [#s3ad021b]

-参考
--Canvas API - Web API | MDN~
https://developer.mozilla.org/ja/docs/Web/API/Canvas_API
JavaScriptのエフェクト処理 の変更点
