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

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

デモのキャプチャ

デモページ
※音でます

[ad#ad-2]

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

デモのキャプチャ

サムネイルのキャプチャ

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

スライドショーの実装

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

サイトのキャプチャ

Fullscreen Slideshow with HTML5 Audio and jQuery

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

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

[ad#ad-2]

HTML, CSSをはじめ、JavaScriptなどは元記事に詳しい解説があるので、ご覧ください。
また、それらのファイル一式をダウンロードすることもできます。

sponsors

top of page

©2018 coliss