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

Vegas Background SlideShow

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

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

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

スポンサーリンク

デモ

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

Vegas Demo

使い方

ダウンロード

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

cap2

基本的な使い方

jQueryとvegas.min.jsを読み込みます。

cssも読み込みます。

htmlはこんな感じです。

基本的なスクリプトを実行します。

これで背景にスライドショーを流すことができます。

オプション

様々なオプションが用意されています。

例えば、「delay」ではスライドショーの間隔をミリ秒単位で指定できます、「timer」をfalseにすると画像の下に表示されるバーが非表示になります、「overlay」で背景画像に重ねるオーバーレイ画像を指定できます、「transition」でスライドの切り替え動作を指定できます。

アニメーション

アニメーションをつけることも可能です。

animation: 'kenburnsLeft' のように指定します。

animation: [ 'kenburnsUp', 'kenburnsDown', 'kenburnsLeft', 'kenburnsRight' ]のように指定すると、複数のアニメーションをランダムで実行できます。

アニメーションには下記が用意されています。

animationDurationでアニメーションの時間(ミリ秒単位)を指定できます。

ドキュメント一覧

人気の記事

動画を背景にフルスクリーンで表示できるJSライブラリ「bideo.js」
動画を背景にフルスクリーンで表示できるJSライブラリ「bideo.js」
手軽に使える動画エンコーディングソフトの決定版(Mindows/Mac対応) Miro Video Converter
手軽に使える動画エンコーディングソフトの決定版(Mindows/Mac対応) Miro Video Converter
スポンサーリンク
Vegas Background SlideShow – 背景いっぱいに画像や動画のスライドショーを表示できるjQueryプラグイン

みんなが見ている記事

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 2016.01.19
  • Views 7,774