東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

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

2017.03.24 Posted by

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

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

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

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

「Vegas」公式

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

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

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

作成したDEMO

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

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

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

「Vegas」公式SETTINGSページ

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

「Vegas」公式TRANSITIONSページ

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

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

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

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

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

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

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278