【jQuery】Vegas2で背景画像のスライドショーを実装する

シュウ

今回は「【jQuery】Vegas2で背景画像のスライドショー」についてのご紹介です!

[記事の内容]

Vegas2とは

Githubに公開されてますのでzipファイル一式をダウンロードしてください。

Vegas2

エフェクトやオーバーレイの種類が多くサイトに合わせて変更もできる
ブラウザー(画面)いっぱいに設定できる
簡単に設定ができる

Vegas2の実装方法

先ほどダウンロードしたzipファイルからCSS、jQueryを読み込ませます。

CSS File

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>【jQuery】Vegas2で背景画像のスライドショーを実装する</title>
<!--vegas.min.css-->
<link href="css/vegas.min.css" rel="stylesheet" type="text/css">	
</head>

CSS「vegas.min.css」は
<head> </head>に読み込ませましょう！

jQuery File

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>【jQuery】Vegas2で背景画像のスライドショーを実装する</title>
<!--vegas.min.css-->
<link href="css/vegas.min.css" rel="stylesheet" type="text/css">	
</head>
<body>


<!--js/vegas.min.js-->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/vegas.min.js"></script>	
</body>
</html>

jquery「vegas.min.js」は
</body>に読み込ませましょう！

jQuery

$('body').vegas({
  slides: [
    { src: 'images/main_img01.jpg' },
    { src: 'images/main_img02.jpg' },
    { src: 'images/main_img03.jpg' },
  ],
   transition: 'fade'
});

今回はブラウザー(画面)いっぱいですので<body>に設定します。

DEMO サイト

Vegas2のオプションについて

VEGAS2 – TRANSITIONSから様々なエフェクトがありますのでチェックしてみてください。

VEGAS2 – TRANSITIONS

Vegas2のオプションでエフェクトを変更しよう

$('body').vegas({
  slides: [
    { src: 'images/main_img01.jpg' },
    { src: 'images/main_img02.jpg' },
    { src: 'images/main_img03.jpg' },
  ],
   transition: 'slideRight'
});

transitionをfadeからslideRight
に変更してみました。
DEMOサイトで確認してみましょう。

DEMO サイト

Vegas2のオプションで細かい設定しよう

VEGAS2 – SETTINGSから様々なオプションがありスライドの速度の変更も可能です。

VEGAS2 – SETTING

delay	スライド間の遅延（ミリ秒単位）。
transitionDuration	移行期間をミリ秒単位で設定します。
animation	このスライドのアニメーションを設定します。ランダムが可能になります。

$('body').vegas({
    delay: 7000,
    timer: false,
    shuffle: true,
    firstTransition: 'fade',
    firstTransitionDuration: 5000,
    transition: 'slideDown2',
    transitionDuration: 2000,
    slides: [
	    { src: 'images/main_img01.jpg' },
	    { src: 'images/main_img02.jpg' },
	    { src: 'images/main_img03.jpg' },
    ]
});

こちらも様々な細かいオプションの設定が可能になります。本当に作業時間の軽減に繋がります。
オプションを追加したDEMOサイトをご用意いたしました。