JavaScriptのエフェクト処理
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfras...
-戻る
--[[JavaScript]]
--[[HTML5 JavaScript API]]
*目次 [#s3004be6]
#contents
*概要 [#tb58f832]
[[効果音>#cf0fca98]]や[[アニメーション>#se421493]]につい...
*詳細 [#a7907bb6]
**効果音 [#cf0fca98]
***jQuery Plugin - Ion.Sound [#p142b55c]
-ブラウザのサポートするMP3やOOGを再生。
-最新は[[HTML5 audio要素>#j0565977]]にフォールバックする。
-jQuery Plugin - クリックアクションに効果音を加える - Ion...
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タグを使用し複数の音源データを指...
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q...
><audio> タグを別にして、別の id で管理する。
**アニメーション [#se421493]
***[[jQuery]] - Effects の .animate()メソッドを使用。 [#z...
.animate() メソッドで実装可能。
以下は、ボタン押下時のアニメーション＋効果音。
$(function() {
var audio = document.getElementById("audio"); // audio...
$('.imgbutton').on('click', function() {
audio.play(); // mp3の再生
$(this).animate(
{
width: '100px', // 小さくしたときのサイズ（幅）
height: '110px' // 小さくしたときのサイズ(高さ）
},
{
duration: 50, // 小さくするときにかかる時間（...
complete: function() {
$(this).animate(
{
width: '175px', // 大きくしたときのサイズ（...
height: '220px' // 大きくしたときのサイズ（...
},
{
duration: 100, // 大きくしたときかかる時間...
complete: function() {
$(this).animate(
{
width: '150px', // 元のサイズ（幅）
height: '165px' // 元のサイズ（高さ）
},
{
duration: 100 // 元のサイズに戻るときに...
});
}
});
}
});
});
});
-拡大・縮小アニメーションの対処~
横並びの要素が拡大・縮小アニメーションの影響を受ける場合、~
要素を"[[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
終了行:
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfras...
-戻る
--[[JavaScript]]
--[[HTML5 JavaScript API]]
*目次 [#s3004be6]
#contents
*概要 [#tb58f832]
[[効果音>#cf0fca98]]や[[アニメーション>#se421493]]につい...
*詳細 [#a7907bb6]
**効果音 [#cf0fca98]
***jQuery Plugin - Ion.Sound [#p142b55c]
-ブラウザのサポートするMP3やOOGを再生。
-最新は[[HTML5 audio要素>#j0565977]]にフォールバックする。
-jQuery Plugin - クリックアクションに効果音を加える - Ion...
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タグを使用し複数の音源データを指...
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q...
><audio> タグを別にして、別の id で管理する。
**アニメーション [#se421493]
***[[jQuery]] - Effects の .animate()メソッドを使用。 [#z...
.animate() メソッドで実装可能。
以下は、ボタン押下時のアニメーション＋効果音。
$(function() {
var audio = document.getElementById("audio"); // audio...
$('.imgbutton').on('click', function() {
audio.play(); // mp3の再生
$(this).animate(
{
width: '100px', // 小さくしたときのサイズ（幅）
height: '110px' // 小さくしたときのサイズ(高さ）
},
{
duration: 50, // 小さくするときにかかる時間（...
complete: function() {
$(this).animate(
{
width: '175px', // 大きくしたときのサイズ（...
height: '220px' // 大きくしたときのサイズ（...
},
{
duration: 100, // 大きくしたときかかる時間...
complete: function() {
$(this).animate(
{
width: '150px', // 元のサイズ（幅）
height: '165px' // 元のサイズ（高さ）
},
{
duration: 100 // 元のサイズに戻るときに...
});
}
});
}
});
});
});
-拡大・縮小アニメーションの対処~
横並びの要素が拡大・縮小アニメーションの影響を受ける場合、~
要素を"[[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
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
