[jQuery]背景画像スライドショー「vegas.js」

結構良かった

背景スライドショー
vegas.jsの導入メリット
導入例
導入方法

背景スライドショー

ブラウザいっぱいに画像を表示してしかもスライドショーにするというのは、ぶっちゃけ普通にスライドショーのライブラリとかプラグインを使えば実現する。

まず親を画面いっぱいにして、子にスライドショーを入れて、サイズを親に合わせてしまえばいい。z-indexでマイナス値を与えたら裏側に重ねられる。

<div class="parent">
    <div class="content">
載せたい内容
    </div>
    <div class="background">
スライドショー
    </div>
</div>

.parent{
    width: 100vw;
    height: 100vh;
    position: relative;
}
.background{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
}
.content{
    position: relative;
    z-index: 1;
}

それにスライドショーも大体背景と中身をそれぞれ指定できるから、切り替えをフェードにして文言とかを統一して画像だけ切り替えても背景画像だけが切り替わってるように見せることができる。

ということで、お気に入りのスライドショーギミックがあればわざわざ導入する必要もないっちゃないということを踏まえておく。

vegas.jsの導入メリット

前置きがやっと済んで本題。

Vegas Background SlideShow

適用したい要素にidを振ってjs側で画像を指定すれば終わるから、htmlがめちゃくちゃスッキリするんで編集がとても楽になる。シンプルめな構成でちょっとだけ洒落た感じにしたい時とかすごくいい。

脱jQueryに躍起にならないなら十分選択肢になる。

導入例

希望の牧場福島被ばく牛支援のお願い～被災動物への募金支援のお願い | BLACKFLAG

東日本大震災での福島第一原発事故によって被災し殺処分を言い渡された牛（動物）たちへの支援（募金）のお願いです

構成から何からすごく気に入ってるんだけど、これもvegas.js。右半分を背景枠として使用して、スマホ表示時にはファーストビューの背景としてある。内容がシンプルで視覚的にも訴えたい、でかい画像の用意があるってのなら必要十分の素敵な構成じゃないかと思う。素晴らしい。

全く関わりはないのだけど色々感動したので認知拡大、拡散の一助になればいいなと思います。

導入方法

cdnもあるし、

vegas - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

Vegas - Fullscreen Backgrounds and Slideshows. - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free...

組み込みもカスタマイズも簡単だし、

ブラウザ全体の背景画像をスライドに！Vegas2の設定方法 | 株式会社チップディップ

今回はjQueryプラグイン「Vegas2」の実装方法について解説していきたいと思います！Vegas2はブラウザや要素を指定して、その背景にスライドショーをフルサイズ表示することができます！まずは早速デモをご覧ください。この...

インパクトのあるトップページとか、ちょっとしたキャンペーンページとか作るときに活用できるんじゃないかな。