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でアニメーションの時間（ミリ秒単位）を指定できます。
コメント
このvegas2の記事を探していますが、数が少なくて困っています。
背景画像をスライドにするだけでなく、動画を組み込んだjsも教えていただけないでしょうか？
どうかお願いします。
http://vegas.jaysalvat.com/ のようにアニメーションにする、ということですかね。
記事の最後に追記してみたので確認してみてください。
返信ありがとうございます！
いえ、アニメーションではなくて、動画を組み込むやり方です、video.jsのような。
vegasは背景に、画像だけでなく、動画も組み込めるスクリプトですよね？
この記事のタイトルにも、最初の方にもあるように。
本家のhttp://vegas.jaysalvat.com/documentation/settings/#videosにも記述があるのですが、
英語のニュアンスが分からずにどうしてもできません。
他サイトにも動画のことは書いてあるのに、サンプルは背景画像のスライドばかりで、
どうしてもわかりません。
藁にもすがる思いでお願いしております。
不躾にすみません。
試してみたのですが、どうも動作が安定しないようです。
下記のコードで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.wp-benricho.com/bideo-js/
https://www.wp-benricho.com/vide-jquery/
やっぱりそうなんですね・・・各プラグインはスマホでは自動再生ができないですし、これはスマホの場合の代替画像が表示されるということで理想的なプラグインだと思ったのですが、残念です。
わざわざ試してくださってありがとうございました！
はじめまして。
Vegasを使って、サイトを作っているんですが、
メディアクエリでレスポンシブにした場合、
ＰＣサイズ（1200px)、ipad（1024px）横サイズはクリアできるのですが、
iPad（768px）縦サイズから画像が小さくなりません。
クライアントのご都合で、デスクトップファーストで作っています。
何か方法があれば、ご教示いただけると嬉しいです。