フェイドインとフェイドアウトを繰り返して、ふわっと画像が切り替わるスライドショーを掲載

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

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

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

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


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

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

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

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


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

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

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

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

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

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


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

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

実際にこのスクリプトを使って数枚の写真をスライドショーにしたサンプルページを用意しました。お使いのブラウザでアクセスして表示を確認してみて下さい。


このように、画像のみを切り替えるスライドショーだけではなく、キャプションも含めたボックス丸ごとを切り替えるスライドショーでも簡単に作れます。後者だと画像ごとにリンク先を変えられるため、商品やサービスを紹介するスライドショーを作りたい場合にも向いています。

それでは、次のページからjQueryを使って、ふわっと画像が切り替わるスライドショーを作る方法を見ていきましょう。