てるてるブログ

てるてるぼうずの日常やらお勉強やら

背景画像のスライドショー「Vegas2」

Posted on | 7月 24, 2015 | No Comments

背景画像のスライドショーを実装するjQueryプラグイン「Vegas2」。

背景画像のスライドショープラグインは他にもいくつかアップしてますけど、Vegas2は切り替えのエフェクトやオーバーレイの種類が豊富なのが魅力。

設定も比較的簡単…だったような?

サイト↓
http://vegas.jaysalvat.com/index.html

Github↓
https://github.com/jaysalvat/vegas

ダウンロードしたファイルから「vegas.min.js」と「vegas.min.css」そしてjqueryをhead内に読み込む。

<link rel="stylesheet" href="js/vegas/vegas.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/vegas/vegas.min.js"></script>

その下辺りにjavaの設定を。
下の設定はbody要素の背景をスライドさせてる一番シンプルな設定。

$(function() {
    $('body').vegas({
        slides: [
            { src: 'img001.jpg' },
	    { src: 'img002.jpg' },
	    { src: 'img003.jpg' },
	    { src: 'img004.jpg' }
        ]
    });
});

スライドショーデモ1

エフェクトの種類やら間隔やら色々もった感じの設定↓

	$(function() {
	    $('#sample1').vegas({
	    	overlay: true,
	    	transition: 'burn', 
	    	transitionDuration: 5000,
	    	delay: 10000,
	    	animation: 'random',
	    	animationDuration: 10000,
	    	shuffle: true ,
	        slides: [
	            { src: 'img001.jpg' },
	            { src: 'img002.jpg' },
	            { src: 'img003.jpg' },
	            { src: 'img004.jpg' }
	        ]
	    });
	});

スライドショーデモ2

エフェクトの種類は「Transitions」のページに、オーバーレイの種類は「Settings」のページにサンプル付き色々試せて面白いです。
他にもオプションで変更出来るのが色々あるので試してみてください。

ちなみに、オーバーレイは「vegas.min.css」のクラス「.vegas-overlay」の背景画像の指定で変更できました。
ダウンロードファイルの「overlays」フォルダに画像が入ってます。
オリジナルでも作れそうですね。

javaの設定でできるのかな?
そこら辺よく分かりませんでした。

トラックバックURL:

Comments

Leave a Reply





*

About

てるぼうず

てるてるぼうずな日常やらお勉強やら

旧ブログ倉庫 »
旧ブログの記事をお探しの方はこちらから

Admin