WEBサイトのFirst Viewでよく見かける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.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
アニメーションを設定する
豊富なエフェクトの種類を選べることもVEGAS2の魅力です。
下記ページでは、手動で動作確認が可能です。
また、delayなどを設定するオプションも豊富です。
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の設定手順について解説しました。
やはり背景画像をズームインフェードさせる、という観点においてはどのプラグインよりも手軽でオプションも豊富のため非常に使い勝手がいいと思います。
オプションが豊富なため、一度実装したコードを使い回し、細かい調整でオリジナリティを出せるという部分も大きなメリットです。
ぜひ一度お試しください。