背景画像をスライドショーにする方法【jQueryプラグインVegas2】

背景画像をスライドショーにする方法

みなさんこんにちは、ゆうやです!

十日草輔「王様ランキング」のアニメ化が決定した今日このごろ、いかがお過ごしでしょうか。

友人が夢中になって読んでいたので面白そうだなと思いつつ手を出せていなかった作品なのでアニメ化でグッと見るハードルが下がり嬉しいです!!


さて本記事では、

jQueryで背景画像をスライドショーにしたいんだけど、サクッとできる方法知りませんか?

という方に向けてその方法を紹介します!

背景画像をスライドショーにする方法

スライドショー完成イメージ

背景画像スライドショーのVegasデモ

テキストは上下中央揃えです

実際に動作しているデモページがあるのでご覧になってください〜

背景画像3枚をスライドショーさせています。

↓↓↓

デモページでスライドショーをみる

Vegas2をダウンロード

今回、背景画像をサクッとスライドショーにできるjQueryプラグインのVegas2を使用します!

Vegas2トップページ

Vegas2トップページ

まず下記URLにアクセスし右斜め下にある「DOWNLOAD VEGAS 2.4.4」をクリックしてVegas2のファイル一式をダウンロードしましょう。

https://vegas.jaysalvat.com/

ファイル一式の中で使用するのは、「vegas.min.css」と「vegas.min.js」です!

それぞれ読み込みましょう!

index.html
<link rel="stylesheet" href="./vendor/vegas/vegas.min.css"> // head内で 
<script type="text/javascript" src="./vendor/vegas/vegas.min.js"></script> // body閉じタグ直前で

※ファイルパスはご自身の環境に応じて設定して下さいまし。

背景画像スライドショーのHTML

HTMLはこんな感じで書きましょう!

↓↓↓

index.html
<div class="Vegas JS_VegasItem">
  <div class="Vegas-Inner">
    <div class="Vegas-Inner-Item">背景画像をスライドショーにする方法</div>
  </div>
</div>

背景画像をスライドショーにしたい要素に「JS_VegasItem」クラスをつけます!

背景画像スライドショーのCSS

・フルスクリーンで表示させたいので親要素に「width:100%」「height:100vh」を指定します!

・上下中央寄せにしたい子要素には「position:absolute」「top:50%」「left:50%」「transform:translate(-50%, -50%)」を指定します!

index.css
.Vegas {
  position: relative;
  width: 100%;
  height: 100vh;
}
.Vegas-Inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.Vegas-Inner-Item {
  color: #fff;
  font-size: 40px;
}

背景画像スライドショーのスクリプト

最後にjsファイルに記述していきましょう!

index.js
$(".JS_VegasItem").vegas({ // スライドショーにしたい要素指定
    slides: [
        { src: "./img/dummy2.jpg" }, // 背景画像1枚目
        { src: "./img/dummy3.jpg" }, // 背景画像2枚目
        { src: "./img/dummy4.jpg" }, // 背景画像3枚目
    ]
  });

背景画像の枚数を増やしたい場合は、{ src: “” }部分を表示したい数だけ追加してください(^o^)

また、用意されている「overlay」というオプションを使うと背景画像にオーバーレイをかけることができます!

ダウンロードしてきたファイル一式の「overlay」というフォルダ内にオーバーレイ用のドット画像が9つ用意されていますので試してみてもいいかもしれません(^o^)

オーバーレイを指定した場合のデモあるのでご覧になってください〜

デモページでオーバーレイverをみる

MEMO
ご自身で用意した画像ももちろんオーバーレイに指定できるのでいろいろ試してみて下さい。

参考記事

参考 背景画像でスライドショーを実装するウェブラボ(株)スタッフブログ

まとめ

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

かなり簡単に背景画像スライドショーを実装できますので、

「トップページのKVをスライドショーでかっこよくしたい!」という方にとってVegas2はとても便利なプラグインですね!

背景画像スライドショーのプラグインではもう1つ「BgSwitcher」がありますが両方使用した経験のある筆者的には今回紹介させていただいた「Vegas2」のほうが圧倒的に使い勝手がいいと思うのでご参考までに(^o^)

最後までご高覧いただきありがとうございました!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です