ブラウザ全体の背景画像をスライドに！Vegas2の設定方法

今回はjQueryプラグイン「Vegas2」の実装方法について解説していきたいと思います！

Vegas2はブラウザや要素を指定して、その背景にスライドショーをフルサイズ表示することができます！

まずは早速デモをご覧ください。

この様に、網点などのオーバーレイや、切り替わり時のエフェクトなど細かく設定することができ、非常に使い勝手がいいです！

それでは、次項からVegas2の設定方法について解説していきたいと思います。

必要なファイルを準備する

Vegas2は公式サイト（右下の方）、もしくはGitHubなどからダウンロードする事ができます。

ファイルをダウンロードすると中に色々ファイルが入っているかと思います。その中から最低限必要なファイルを以下にまとめました。

vegas

├ overlays
├ vegas.min.css
├ vegas.min.js

早速、これらを使ってVegas2を実装していきましょう！

HTMLとCSSを記述

まずは先ほど準備したファイルをHTMLファイルのhead内で読み込んでいきます。

HTML

<head>
・
・
中略
・
・
<link rel="stylesheet" type="text/css" href="css/vegas.min.css" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> //jQueryファイル
<script script type="text/javascript" src="js/vegas.min.js"></script>
<script script type="text/javascript" src="js/function.js"></script> //Vegas2の設定用のjsファイル
</head>
<body>
<div id="vegas">

</div>
</body>

head内に『vegas.min.css』と『vegas.min.js』の他に『function.js』というJSファイルを作成して読み込ませます。

これはvegas2の設定を記述していくファイルです。今回は『function』という名前にしていますが、任意のものに変更可能です。

body内ある『#vegas』にVegas2を表示しようと思います。こちらもID名は任意です。

次はCSSです。

CSS

#vegas {
    width: 100vw;
    height: 100vh;
}

こんな感じで横と縦の幅をブラウザ幅100％に設定しておきます。

これでHTMLとCSSは準備完了です。

次項で『function.js』の中身を記述していきます！

JSを記述

『function.js』で表示の設定を行なっていきます。

まずは下記をご覧ください。

function.js

$(function() {
    $('#vegas').vegas({
        slides: [
            { src: './images/vegas_sample01.jpg' },
            { src: './images/vegas_sample02.jpg' },
            { src: './images/vegas_sample03.jpg' },
            { src: './images/vegas_sample04.jpg' }
        ],
    });
});

これが基本の形になります。

srcの中に画像のパスを指定し、表示する画像を選択します。

上手くいっていれば、この時点でVegasが動いているはずです。もし動いていなければ指定する要素名やパスが間違っていないか見直してみてください！

オプションの設定

次はオプションを設定してカスタマイズしてみましょう。

例として、下記にデモページのセッティングを載せておきます。

function.js

$(function() {
    $('#vegas').vegas({
        slides: [
            { src: './images/vegas_sample01.jpg' },
            { src: './images/vegas_sample02.jpg' },
            { src: './images/vegas_sample03.jpg' },
            { src: './images/vegas_sample04.jpg' }
        ],
        overlay: './js/overlays/02.png', //フォルダ『overlays』の中からオーバーレイのパターン画像を選択
        transition: 'fade', //スライドを遷移させる際のアニメーション
        transitionDuration: 4000, //スライドの遷移アニメーションの時間
        delay: 10000, //スライド切り替え時の遅延時間
        animation: 'random', //スライド表示中のアニメーション
        animationDuration: 20000, //スライド表示中のアニメーションの時間
    });
});

デモページの設定はこんな感じです！

オプションは公式サイトのSETTINGページに全て掲載されています。

オプションの設定次第で様々な使い方ができそうです！