• 背景画像のスライドショーを簡単に実装するプラグイン【VEGAS2】設定手順

    jQuery

    Vegas Background SlideShow

    Listen & Subscribe

    WEBサイトのFirst Viewでよく見かけるBackground Slideshowが簡単にできるプラグイン、VEGAS2のご紹介です。

    実際にコードを掲載しながら解説します。

    完成したサイトを見てみる

    Vegas Background SlideShow

    冒頭でもご紹介した、VEGAS2の公式サイトを一度ご覧ください。

    VEGAS2公式サイト

    背景画像がズームしてフェードインするスライドショウです。

    細かいオプションも豊富で何より手っ取り早いのがメリットです。

    デメリットは、サイトの内容によっては若干立ち上がりが遅くなる印象ですが、First ViewにSliderを使う場合はある程度は仕方ないのかなとも思います。

    動作デモのコード

    <!DOCTYPE html>
<html>
<head>
<title>VEGAS</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.5.4/vegas.css"/>
</head>
<style media="screen">
body{
margin:0;
}
#mainvisual{
height:100vh;
}
</style>
<body>
　　<section id="first-view" class="position-relative">
　　　<div id="mainvisual"></div>
　　</section>
</body>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.5.4/vegas.min.js"></script>
<script type="text/javascript">
　'use strict';
　jQuery(function($){
　　$('#mainvisual').vegas({
　　　slides:[
　　　　{src:'img/zoom01.jpg'},
　　　　{src:'img/zoom02.jpg'},
　　　　{src:'img/zoom03.jpg'},
　　　　{src:'img/zoom04.jpg'}
　],
　transition: 'fade',
　transitionDuration: 4000,
　delay: 18000,
　cover:true,
　animation: 'random',
　animationDuration: 20000,
　timer: true
});
});
</script>

    CDNを使用した実装までの最短ルートとなるコードです。

    上記をコピペし、同階層にimgというディレクトリを作り、zoom01からzoom04というjpg画像を設置すればOKです。

    設定の手順

    せっかくなので簡単に手順を解説します。

    スポンサーリンク

    CDNを読み込む

    上記の通り各所cssとjsのCDNを読み込んでください。

    下記の公式ページにアクセスすると最新のタグがコピペできます。

    VEGAS ライブラリー CDN

    vegas.css を<head>タグ内にて読み込み、vegas.min.js を</body>タグ以下で読み込みます。

    vegas.min.jsを読み込む前にjQueryの読み込みもお忘れなく。

    jQuery CDN – Latest Stable Versions

    CDNじゃなく直で読み込みたい場合は

    githubに公開されてるzipファイルをダウンロードし、distに入ってるvegas.css vegas.min.jsをアップロードし読み込ませてください。

    手順は緑色のボタンのcodeという部分をクリック→ Download zip

    github – vegas

    アニメーションを設定する

    豊富なエフェクトの種類を選べることもVEGAS2の魅力です。

    下記ページでは、手動で動作確認が可能です。

    TRANSITIONS(動作確認)

    また、delayなどを設定するオプションも豊富です。

    SETTINGS

    Google翻訳が日本語対応してるので、各オプションが何を意味しているのか理解しやすいです。

    slide 最初のスライドのインデックス番号。
    preload 開始時に画像と動画の両方をプリロードします。
    autoplay スライドショーを自動的に開始します。

    よく使うおすすめのSetting

    transitionDuration
    		 画像が切り替わる時のアニメーション秒数
    delay
    		 画像が切り替わるまでの秒数。
    align
    		 画像の初期位置の横の基準値
    valig
    		 画像の初期位置の縦の基準値

    レスポンシブ設定

    デバイスによって画像を変更したい場合は下記のようなコードでも実装可能です。

    let slides = [
 {src:'path/images/zoom01.jpg'},
 {src:'path/images/zoom02.jpg'},
 {src:'path/images/zoom03.jpg'},
 {src:'path/images/zoom04.jpg'}
];


if (window.matchMedia("(max-width: 991px)").matches) {
 slides = [
  {src:'path/images/zoom-sp01.jpg'},
  {src:'path/images/zoom-sp02.jpg'},
  {src:'path/images/zoom-sp03.jpg'},
  {src:'path/images/zoom-sp04.jpg'}
 ];
}
$('#mainvisual').vegas({
 slides: slides,
 transition: 'fade',
 transitionDuration: 4000,
 delay: 18000,
 cover:true,
 animation: 'random',
 animationDuration: 20000,
 timer: true
});

    まとめ

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

    今回VEGAS2の設定手順について解説しました。

    やはり背景画像をズームインフェードさせる、という観点においてはどのプラグインよりも手軽でオプションも豊富のため非常に使い勝手がいいと思います。

    オプションが豊富なため、一度実装したコードを使い回し、細かい調整でオリジナリティを出せるという部分も大きなメリットです。

    ぜひ一度お試しください。

    実装の依頼はこちらから