ウェブデザイナーの毎日のお仕事のメモ

作成日:2021.02.03  最終更新日:2021.02.03

js / jQuery

ブラウザいっぱいの背景画像をスライドショーにできるVegas2.jsの使い方

背景画像をスライドショーで見せたいときに使えるVegas2.jsの使い方です。
色々オプションも豊富で便利です。

Vegas2.jsの使い方手順

①ファイルのダウンロード

Vegas2のページ にアクセスしします。
右下に並んでいるボタンの中の『DOWNLOAD VEGAS 』というボタンを押すと、ファイルのダウンロードが始まります。
※下の画像の赤枠で囲ったところです。

②必要なファイルを任意のフォルダに設置する

ダウンロードしたファイルは以下のような構成になっています。

実際に必要なのは、

  • jvegas.css
  • vegas.js

の1つのファイルですので、任意のフォルダこれらのファイルを設置してください。
※minファイルもありますので、ご自身の用途に合わせてどのファイルを使用するかご検討ください。

③ファイルを読み込む

cssとjsのファイルを読み込みます。
※ファイルの読み込みパスは、ご自身の環境に合わせて変更してください。
※vegas.jsを読み込む前にjqueryも読み込んでおきます。

<link rel="stylesheet" href="css/vegas.css">
<script src='js/jquery.js'></script>
<script src="js/vegas.js"></script>

④JS・HTMLにjquery.matchHeight.jsを動かすコードを書く

今回は、bodyタグ上の背景画像をスライドショーで表示する、という設定で進めていきます。なので、HTMLには最低限、bodyタグさえあればOKです。

JS

jsは以下のように書くだけです。

$("body").vegas({
    slides: [
        { src: "/img/img_01.jpg" },
        { src: "/img/img_02.jpg" },
        { src: "/img/img_03.jpg" },
        { src: "/img/img_04.jpg" },
        { src: "/img/img_05.jpg" }
    ]
});

完成サンプル

上記コードを書いた完成系は、以下のサンプルの様になります。

Vegas2.jsで使えるオプションについて

Vegas2.jsには色々オプションがあります。以下ページよりご確認頂けます。

Vegas2のSETTINGSページ

Vegas2.jsで変更できるtransitionについて

Vegas2では、色々な種類のtransition、animationの種類があり、
以下より、実際にどのような動きになるか確認することができます。

Vegas2のTRANSITIONSページ


以下のように書いてtransitionを変更します。

JS

$("body").vegas({
    slides: [
        { src: "/img/img_01.jpg" },
        { src: "/img/img_02.jpg" },
        { src: "/img/img_03.jpg" },
        { src: "/img/img_04.jpg" },
        { src: "/img/img_05.jpg" }
    ],
    transition: 'zoomOut'
});

最新記事