フェイドイン・フェイドアウトを繰り返して「ふわっと切り替わる」スライドショー

次の画像がフェイドインしてくる形で「ふわっと」切り替わるスライドショー

次の画像がフェイドインしてくる形で「ふわっと」切り替わるスライドショー

ページの上部に表示されているバナー画像が、スライドショーの形で繰り返し切り替わっていくデザインを採用したウェブサイトをよく見かけます。

スライドショーにも様々な表示効果がありますが、画像が1枚ずつ一瞬で切り替わるのではなく、次の画像が1秒程度かけてフェイドインしてくるような「ふわっと切り替わる」効果を出しているものもよく見かけます。


 
複数のバナー画像がフェイドインを繰り返して、ふわっと切り替わるスライドショーになっている

複数のバナー画像がフェイドインを繰り返して、ふわっと切り替わるスライドショーになっている

例えば、本稿の初版執筆時点では、日本郵便サイトの上部にある大きなバナー画像でも同様の効果が使われていました。右図のように、複数のバナー画像が3秒間隔くらいでフェイドアウト・フェイドインを繰り返して、ふわっと切り替わります。(※2015年現在では、別の効果に変わっています。)

このような効果を使ってスライドショーを作ると、画像が切り替わっていることがよく分かって目に付きます。しかしながら、派手すぎる効果ではないので、煩く感じられる心配はないでしょう。


 
今回は、このような「複数の画像をふわっと切り替える効果を出すスライドショー」の作り方をご紹介致します。

「A Simple jQuery Slideshow」スクリプトを使う

「A Simple jQuery Slideshow」スクリプトの公開サイト

「A Simple jQuery Slideshow」スクリプトの公開サイト

上記の効果を伴うスライドショーは、JavaScriptの有名ライブラリであるjQueryを活用すると短い記述で作成できます。今回は、「A Simple jQuery Slideshow」という名称で公開されているスクリプトを使う方法をご紹介致します。

特にプラグインという形で配布されているわけではないので、直接JavaScriptソースを記述して使います。ほぼコピー&ペーストするだけで使えますので、とても簡単です。


 
指定秒数毎に次の画像がフェイドインしてくる形で「ふわっと切り替わる」スライドショーの作成例

指定秒数毎に次の画像がフェイドインしてくる形で「ふわっと切り替わる」スライドショーの作成例

実際に「A Simple jQuery Slideshow」スクリプトを使って作成したサンプルページは、右図(下記リンク先)の通りです。
サンプル1では、画像だけがフェイドインを繰り返して次々に表示されていきます。
サンプル2では、画像自体がリンクになっており、さらに画像の下部に表示されたキャプションも含めて切り替わっていきます。

このように、単に画像を切り替えるスライドショーだけではなく、(div要素やp要素などで作る)ボックスを丸ごと切り替えるスライドショーも簡単に作れます。

それでは、次のページから「A Simple jQuery Slideshow」スクリプトを使ってスライドショーを作る方法を見ていきましょう。