背景いっぱいに画像や動画のスライドショーを表示できる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でアニメーションの時間(ミリ秒単位)を指定できます。

ドキュメント一覧

人気の記事

動画を背景にフルスクリーンで表示できるJSライブラリ「bideo.js」
動画を背景にフルスクリーンで表示できるJSライブラリ「bideo.js」
手軽に使える動画エンコーディングソフトの決定版(Mindows/Mac対応) Miro Video Converter
手軽に使える動画エンコーディングソフトの決定版(Mindows/Mac対応) Miro Video Converter

人気の記事

2017年、人気の無料WordPressテーマ100選
2017年、人気の無料WordPressテーマ100選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選

フリーランスITエンジニアの案件・求人情報サイト

フリーランスWebクリエイター大募集!「ギークスジョブ」

5 Comments

  1. タカダ

    このvegas2の記事を探していますが、数が少なくて困っています。
    背景画像をスライドにするだけでなく、動画を組み込んだjsも教えていただけないでしょうか?
    どうかお願いします。

    1. タカダ

      返信ありがとうございます!
      いえ、アニメーションではなくて、動画を組み込むやり方です、video.jsのような。
      vegasは背景に、画像だけでなく、動画も組み込めるスクリプトですよね?
      この記事のタイトルにも、最初の方にもあるように。
      本家のhttp://vegas.jaysalvat.com/documentation/settings/#videosにも記述があるのですが、
      英語のニュアンスが分からずにどうしてもできません。
      他サイトにも動画のことは書いてあるのに、サンプルは背景画像のスライドばかりで、
      どうしてもわかりません。
      藁にもすがる思いでお願いしております。
      不躾にすみません。

    2. webtoolnavi

      試してみたのですが、どうも動作が安定しないようです。
      下記のコードでChromeで確認したところ、初回は上手く動作するのですが、ページをリロードしたり再度表示したときに動画が表示されません。一度ブラウザを落としてからもう一度表示すると動作します。

      $(function(){
      $('#example, body').vegas({
      slides: [
      { src: 'img/slide1.jpg' },
      { src: 'img/slide2.jpg',
      video: {
      src: ['video/video.mp4']
      }
      }
      ]
      });
      });

      本家にも
      Experimental video support is providedAS A BONUS . Video backgrounds could not behave as expected on some browsers. Use it at your own risk
      「動画については実験的なボーナス機能として提供している」とあるので、動画についてはこのライブラリでの実装は難しそうです。(記事で紹介しておいて、すいません。)

      背景に動画単独を表示するだけならば、下記のようなライブラリもあります。
      https://www.webtoolnavi.com/bideo-js/
      https://www.webtoolnavi.com/vide-jquery/

  2. タカダ

    やっぱりそうなんですね・・・各プラグインはスマホでは自動再生ができないですし、これはスマホの場合の代替画像が表示されるということで理想的なプラグインだと思ったのですが、残念です。
    わざわざ試してくださってありがとうございました!

コメント

  • Posted on
  • Updated on
  • Views 12,012