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

こんにちは、ウェブラボ技術メモです。

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

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

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

「Vegas」公式

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

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

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

作成したDEMO

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

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

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

「Vegas」公式SETTINGSページ

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

「Vegas」公式TRANSITIONSページ

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

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

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

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

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

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

  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。