Your SlideShare is downloading. ×
VEGAS jQuery Plugin を使ってみた ~背景画像やスライドショーを画面いっぱいに表示~
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

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

1,682
views

Published on

#jsCafe20 でお話した内容です。 …

#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
1,682
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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