Vegas Background SlideShowは背景いっぱいに画像や動画のスライドショーを表示できるjQueryプラグインです。
背景として設定できるので、スライド画像の上にテキストや画像を表示することができます。オプションで細かな設定を行え、写真にパターン画像を重ねることもできます。
画像だけでなく、動画も複数指定して連続で流すことができます。
デモ
デモページを用意しました。
使い方
ダウンロード
サイトの「DOWNLOAD VEGAS 2.2.0」からダウンロードします。
基本的な使い方
jQueryとvegas.min.jsを読み込みます。
<script src="js/jquery.min.js"></script> <script src="js/vegas/vegas.min.js"></script>
cssも読み込みます。
<link rel="stylesheet" href="js/vegas/vegas.min.css">
htmlはこんな感じです。
<body> <div id="example"></div> </body>
基本的なスクリプトを実行します。
<script>
$(function(){
$('#example, body').vegas({
slides: [
{ src: 'img/slide1.jpg' },
{ src: 'img/slide2.jpg' },
{ src: 'img/slide3.jpg' },
{ src: 'img/slide4.jpg' }
]
});
});
</script>
これで背景にスライドショーを流すことができます。
オプション
様々なオプションが用意されています。
例えば、「delay」ではスライドショーの間隔をミリ秒単位で指定できます、「timer」をfalseにすると画像の下に表示されるバーが非表示になります、「overlay」で背景画像に重ねるオーバーレイ画像を指定できます、「transition」でスライドの切り替え動作を指定できます。
$(function(){
$('#example, body').vegas({
slides: [
{ src: 'img/slide1.jpg' },
{ src: 'img/slide2.jpg' },
{ src: 'img/slide3.jpg' },
{ src: 'img/slide4.jpg' }
],
delay: 7000,
timer: false,
overlay: 'js/vegas/overlays/01.png',
transition: 'fade2',
});
});
アニメーション
アニメーションをつけることも可能です。
animation: 'kenburnsLeft' のように指定します。
$(function(){
$('#example, body').vegas({
slides: [
{ src: 'img/slide1.jpg' },
{ src: 'img/slide2.jpg' },
{ src: 'img/slide3.jpg' },
{ src: 'img/slide4.jpg' }
],
delay: 7000,
timer: false,
overlay: 'js/vegas/overlays/01.png',
animation: 'kenburnsLeft'
});
});
animation: [ 'kenburnsUp', 'kenburnsDown', 'kenburnsLeft', 'kenburnsRight' ]のように指定すると、複数のアニメーションをランダムで実行できます。
アニメーションには下記が用意されています。
kenburns kenburnsUp kenburnsDown kenburnsRight kenburnsLeft kenburnsUpLeft kenburnsUpRight kenburnsDownLeft kenburnsDownRight random
animationDurationでアニメーションの時間（ミリ秒単位）を指定できます。