~背景画像やスライドショーを画面いっぱいに表示~
VEGAS jQuery Plugin
を使ってみた
小林由憲(こばやしよしのり)
Twitter: @AsbyuKobayashi
ブログ: In Advance Only
生まれは 奈良県 です。
2
http://sakurashinmachi-potal.com/
フォトギャラリーや背景画像にインパクトがあるサイト・・・
http://lavenham.jp/LAVENHAM:
桜新町ポータル:
http://yakitori-ya.ne...
VEGAS
BackGround jQuery Plugin
公式サイト:http://vegas.jaysalvat.com/
VEGASの特徴
・指定されたイメージをウィンドウ幅いっぱいに大きく表示できる。
OVERLAY
SLIDSHOW
RESPONSIBLE
EVENTS & CALLBACKS
・イメージの指定やアクションがシンプルで簡単。
4つの機能
OVERLAY オーバーレイ
・イメージの上に、調整用のイメージを重ね合わせる。
・イメージの明暗を調整したり、画質劣化をわかりにくくする効果がある。
$.vegas('overlay',{
src:‘src/overlays/01.png’,...
SLIDSHOW スライドショー
・イメージを指定するだけで、簡単にスライドショーができる。
・fade(フェード)機能があり、滑らかにイメージを表示できる
→ プラグインでは、jQueryのfadeInを使っている。
・delay(ディレイ)...
EVENTS & CALLBACKS
・VEGASのアクションに合わせて、イベントが発火する。
$.vegas('slideshow',{
delay:8000,
backgrounds:[
{src:'images/img01.jpg',fa...
RESPONSIBLE レスポンシブル
・常にブラウザいっぱいに表示されるように対応してくれる。
→初期設定で、イメージを縦(valign)横(align)とも、
centerなので、何もしなくても上手く最適化してくれる。
デバイス横 デバイス縦
VEGAS jQuery Plugin まとめ
・背景画像のスライドとしては、非常に簡単で使いやすい。
・OVERLAY、 SLIDSHOWが微調整ができるので表現の幅が広がる。
・なにもしなくても、RESPONSIBLE。
少しの労力で、大き...
Upcoming SlideShare
Loading in...5
×

VEGAS jQuery Plugin を使ってみた ~背景画像やスライドショーを画面いっぱいに表示~

2,254

Published on

#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は最初にスライドするためのイメージを読み込むので、どうしても最初の起動が遅いです。

僕のようにサイト制作を速攻で行いたい人には、向いてるプラグインだと思います(#^.^#)

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,254
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

VEGAS jQuery Plugin を使ってみた ~背景画像やスライドショーを画面いっぱいに表示~

  1. 1. ~背景画像やスライドショーを画面いっぱいに表示~ VEGAS jQuery Plugin を使ってみた
  2. 2. 小林由憲(こばやしよしのり) Twitter: @AsbyuKobayashi ブログ: In Advance Only 生まれは 奈良県 です。 2
  3. 3. 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:
  4. 4. VEGAS BackGround jQuery Plugin 公式サイト:http://vegas.jaysalvat.com/
  5. 5. VEGASの特徴 ・指定されたイメージをウィンドウ幅いっぱいに大きく表示できる。 OVERLAY SLIDSHOW RESPONSIBLE EVENTS & CALLBACKS ・イメージの指定やアクションがシンプルで簡単。 4つの機能
  6. 6. 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 なし
  7. 7. 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
  8. 8. 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
  9. 9. RESPONSIBLE レスポンシブル ・常にブラウザいっぱいに表示されるように対応してくれる。 →初期設定で、イメージを縦(valign)横(align)とも、 centerなので、何もしなくても上手く最適化してくれる。 デバイス横 デバイス縦
  10. 10. VEGAS jQuery Plugin まとめ ・背景画像のスライドとしては、非常に簡単で使いやすい。 ・OVERLAY、 SLIDSHOWが微調整ができるので表現の幅が広がる。 ・なにもしなくても、RESPONSIBLE。 少しの労力で、大きな成果があるため、 対費用効果が高いお勧めのプラグイン!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×