SHU BLOG

BLOG NEWS ブログ

TITLE

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

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

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

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>に設定します。

Vegas2のオプションについて

Vegas2のオプションについて

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

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

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

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

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

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

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

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サイトをご用意いたしました。

確かな力が身につくJavaScript「超」入門 第2版
created by Rinker

jQuery標準デザイン講座
created by Rinker

まとめ

今回はこれで以上です。

Vegas2は
1:エフェクトやオーバーレイの種類が多くサイトに合わせて変更もできる
2:簡単に設定ができる
この2点がとても大きいです!

作業効率のアップにも繋がりますので
一度お試しください。

スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top