vegas jquery plugin を使ってみた...
DESCRIPTION
#jsCafe20 でお話した内容です。 サイト制作のときに、バックグラウンドイメージをスライドさせたいときがあります。 また、レスポンシブ対応も視野に入れたいです。 そんなときによく使っているのが、BackGround jQuery Plugin の「VEGAS」です。 非常に簡単に設定できて、応用も効くので重宝します。 一部のエリアでのスライドショーだけなら、他のjQueryプラグインでよいのですが、背景全体となると・・・。 VEGASでは、HTMLのimgタグを使って背景をスライドさせています。 OVERLAYで、イメージの明暗をつけたりできるので、Photoshopで再加工しなくても、VEGASで表現を調整できるので、制作コストが省けます。また、OVERLAY用のイメージも独自のものが指定できます。 SLIDSHOWでは、スライドするごとにイベントが発生してくれるので、スライドが切り替わるごとにアクションを起こすことができるのが便利です(#^.^#) レスポンシブ対応もよい感じで行ってくれるので、あまり他のデバイスを意識しなくても、上手くいきます。 僕が作った制作事例です。 http://ticklecode.com/present/140511_jsCafe_Vegas/sample02.html http://sakurashinmachi-potal.com/ http://yakitori-ya.net/ やはり、ブラウザ全体にイメージが広がると好感度がよいです(#^.^#) あと、スライドするイメージの数ですが、あまり多いと最初の表示が遅くなります。 VEGASは最初にスライドするためのイメージを読み込むので、どうしても最初の起動が遅いです。 僕のようにサイト制作を速攻で行いたい人には、向いてるプラグインだと思います(#^.^#)TRANSCRIPT
～背景画像やスライドショーを画面いっぱいに表示～
VEGAS jQuery Plugin を使ってみた
小林由憲（こばやしよしのり）
Twitter: @AsbyuKobayashi
ブログ : In Advance Only
生まれは 奈良県 です。
2
http://sakurashinmachi-potal.com/
フォトギャラリーや背景画像にインパクトがあるサイト・・・
http://lavenham.jp/LAVENHAM ：
桜新町ポータル：
http://yakitori-ya.net/I Love YAKITORI ：
http://www.iarchitect.co.jp/morishima/index.html森島吉直写真展：
http://www.bingoya.net/BINGOYA ：
VEGAS の特徴
・指定されたイメージをウィンドウ幅いっぱいに大きく表示できる。
OVERLAY
SLIDSHOW
RESPONSIBLE
EVENTS & CALLBACKS
・イメージの指定やアクションがシンプルで簡単。
4 つの機能
OVERLAY オーバーレイ
・イメージの上に、調整用のイメージを重ね合わせる。
・イメージの明暗を調整したり、画質劣化をわかりにくくする効果がある。
$.vegas('overlay',{ src:‘src/overlays/01.png’, opacity:0.5});
01.png （実際は、 3 ピクセルぐらい）
例： OVERLAY 用イメージ
・基本的な OVERLAY 用イメージ（ 15 個）は、「 /src/overlays 」に格納。
http://ticklecode.com/present/140511_jsCafe_Vegas/sample01.html
http://ticklecode.com/present/140511_jsCafe_Vegas/sample01_NoOverlay.html
OVERLAY あり
OVERLAY なし
SLIDSHOW スライドショー
・イメージを指定するだけで、簡単にスライドショーができる。
・ fade （フェード）機能があり、滑らかにイメージを表示できる → プラグインでは、 jQuery の fadeIn を使っている。
・ delay （ディレイ）でイメージの表示時間（ミリ秒）が指定できる。 →プラグインでは、 setInterval で実現している。
$.vegas('slideshow',{ delay:8000, backgrounds:[ {src:'images/img01.jpg',fade:4000}, {src:'images/img02.jpg',fade:4000}, {src:'images/img03.jpg',fade:4000}, {src:'images/img04.jpg',fade:4000}, {src:'images/img05.jpg',fade:4000} ]});
http://ticklecode.com/present/140511_jsCafe_Vegas/sample02.html
EVENTS & CALLBACKS
・ VEGAS のアクションに合わせて、イベントが発火する。
$.vegas('slideshow',{ delay:8000, backgrounds:[ {src:'images/img01.jpg',fade:4000}, {src:'images/img02.jpg',fade:4000}, {src:'images/img03.jpg',fade:4000}, {src:'images/img04.jpg',fade:4000}, {src:'images/img05.jpg',fade:4000} ], // walk スライドが変わるたびにイベントが発生 walk:function(step){ // クレジット表記の変更 $("#credit").html(phtcred[step]); }});
walk イベントはイメージが切り替わるたびに発生する。引数の step に現在のスライド番号がセットされている。
http://ticklecode.com/present/140511_jsCafe_Vegas/sample02.html
RESPONSIBLE レスポンシブル
・常にブラウザいっぱいに表示されるように対応してくれる。 →初期設定で、イメージを縦（ valign ）横（ align ）とも、 center なので、何もしなくても上手く最適化してくれる。
デバイス横 デバイス縦
VEGAS jQuery Plugin まとめ
・背景画像のスライドとしては、非常に簡単で使いやすい。
・ OVERLAY 、 SLIDSHOW が微調整ができるので表現の幅が広がる。
・なにもしなくても、 RESPONSIBLE 。
少しの労力で、大きな成果があるため、 対費用効果が高いお勧めのプラグイン！