これはかっこいい！ HTML5 AudioとjQueryを使った臨場感溢れるスライドショー

Post on:2011年7月13日

sponsors

ブラウザいっぱいに画像を表示し、画像のスライドやサムネイルの表示・非表示のエフェクトがかっこいいだけでなく、HTML5 Audioを使いサウンドも加えた臨場感溢れるスライドショーを実装するチュートリアルを紹介します。

デモページ
※音でます

[ad#ad-2]

画像の表示はサムネイルから操作できます。
レッドの矩形は現在表示されているサムネイルで、それをクリックするとブラウザいっぱいに画像を表示します。

サムネイルのキャプチャ

サムネイル画像の下にあるレッドのバーを操作することで、サムネイルをスクロールできます。

スライドショーの実装

スライドショーの実装は、下記ページに解説があります。

ここでは、実装に使用しているスクリプトを紹介します。

jQuery: ベースとなるスクリプトです。
Vegas Background: スライドショーをブラウザいっぱいに表示するjQueryのプラグインです。; 参考：背景画像やスライドショーをブラウザいっぱいに表示するスクリプト -Vegas
jScrollPane: オリジナルのスクロールバーを設置するjQueryのプラグインです。
jQuery Easing Plugin: イージングのエフェクトを実装するjQueryのプラグインです。
Buzz: HTML5のaudioを制御するスクリプトです。