背景いっぱいに画像や動画のスライドショーを表示できるjQueryプラグイン Vegas Background SlideShow

Vegas Background SlideShow

Vegas Background SlideShowは背景いっぱいに画像や動画のスライドショーを表示できるjQueryプラグインです。

背景として設定できるので、スライド画像の上にテキストや画像を表示することができます。オプションで細かな設定を行え、写真にパターン画像を重ねることもできます。

画像だけでなく、動画も複数指定して連続で流すことができます。

デモ

デモページを用意しました。

Vegas Demo

使い方

ダウンロード

サイトの「DOWNLOAD VEGAS 2.2.0」からダウンロードします。

cap2

基本的な使い方

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でアニメーションの時間(ミリ秒単位)を指定できます。

ドキュメント一覧

人気の記事

タイトルとURLをコピーしました