背景画像でスライドショーを実装する

今回は、背景画像でスライドショーを実装できるjQueryプラグイン「Vegas」を利用してみたいと思います。

このプラグインでは動画も背景に埋め込めるみたいですが、今回は画像だけで実装していきます。

まずは公式からファイル一式をダウンロードしましょう。右下辺りにDOWNLOADとあります。

→「Vegas」公式

HTMLのhead内でCSS、jQuery本体と一緒にプラグインを読み込ませます。

<link rel="stylesheet" href="css/vegas.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/vegas.min.js"></script>

次に必要なスクリプトを記述します。

$(function(){
  $('body').vegas({ //背景画像でスライドショーしたい場所の設定
    slides: [
     { src: 'img/img01.jpg' }, //スライドする画像を配列で設定
     { src: 'img/img02.jpg' },
     { src: 'img/img03.jpg' }
    ],
     delay: 5000, //スライドまでの時間ををミリ秒単位で設定
     timer: true, //タイマーバーの表示/非表示を切り替え
     overlay: 'img/01.png', //オーバーレイする画像の設定
     animation: 'random', //スライドのアニメーションを設定
     transition: 'blur', //スライド間のエフェクトを設定
     transitionDuration: 1000 //エフェクト時間をミリ秒単位で設定
  });
});

必要な記述は以上です。作成したDEMOは以下になります。

→作成したDEMO

他にも様々なオプションがあるので気になる方は公式をご覧下さい。

オーバーレイ用の画像もダウンロードしてきたファイルの中に複数用意してあるのでお好みで設定してください。

しかも公式でプレビューもできます。なんて親切！

→「Vegas」公式SETTINGSページ

アニメーションやエフェクトのプレビューもできます。以下のページから気に入ったものを設定しましょう。

→「Vegas」公式TRANSITIONSページ

対応ブラウザは　IE9 +、Safari、Firefox、Chrome　とのことです。

いかがでしたでしょうか？

簡単に実装できてオプションも豊富、しかも公式でエフェクトなどのプレビューもできる！

ここまで親切なプラグインにお目にかかることはあまりないですね。

かなり自由度も高いので今後活躍する機会もありそうです。

以上、ウェブラボ技術メモでした。