Adobe認定トレーニングセンター

主にAdobeのソフト操作を紹介しています。DTPやWebの業務で役にたったことやツールのポイントなど参考になればと思います。 主観的なものもありますのでご了承ください!

Web

Vegas2で背景画像をスライドショーに(jQueryプラグイン)

使用ソフト: Dreamweaver CS5  

cssで背景画像として設置していた画像をスライドショーにしたい。画面いっぱいに画像をスライドショーとして見せたい、そんなときに使えるのがVegas2というjQueryプラグインです。
エフェクトやオーバーレイなどの細かい切り替えオプションも充実しており、非常に使い勝手が良いプラグインです。

※jQueryの読み込みがすでに完了してあることが前提です!
まだの方はjQueryのダウンロードからお願いします。

jQueryダウンロード

Vegas2の使い方

Vegas2画面

まずは以下のサイトからVegas2をダウンロードします。

Vegas2 公式サイト
Git Hub

ダウンロードしたファイルの中から
「vegas.min.css」
「vegas.min.js」の二つのファイルを使います。

Vegas2のファイル内容

「vegas.min.css」をcssフォルダに、「vegas.min.js」をjsフォルダにそれぞれコピーします。

その後、この2つをhtmlに読み込みます。
「vegas.min.css」はheadタグ内に、「vegas.min.js」はbodyタグの終了直前にscriptタグを使って読み込みます。

タグ配置HTMLサンプル

また、別に「function.js」というタイトルのjsフォルダ作成して、「vegas.min.js」と同様にbody終了直前に配置しておきます。
このファイルを使って表示する画像の指定やエフェクトなどオプションの調整をします。
今回はfunctionという名前をつけましたが、ファイル名は任意で好きなものに変更してください。

これで準備は完了です。

実際に動かしてみよう

「function.jp」に以下の記述を追加します。

$(function() {
$(‘body’).vegas({
slides: [
{ src: ‘./images/sumple.jpg’ },
{ src: ‘./images/sumple.jpg’ },
{ src: ‘./images/sumple.jpg’ },
{ src: ‘./images/sumple.jpg’ }
],
});
});

ブラウザ全体に画像をスライドしたいときはbodyを、一部に適用したい場合はidタグなどをつけて指定します。(上記ではbodyに指定してます。)
idなどで指定する場合は、別途cssで画像の表示範囲を作っていないと画像が表示されないので注意してください。

「./images/sumple.jpg」部分に実際にスライドに使用したい画像を指定します

これで基本的な設定は完了です。ここまで出来ればスライドショーが反映されているはずです。

オプションを適用する

Vegas2はあらかじめ多くのタグが指定されており、それを追加することで自由にスライド内容をカスタマイズすることができます。

Vegas2公式サイト設定画面

公式サイト 設定一覧ページ

また、フェードイン、フェードアウトのエフェクト設定や、スライドの細かい動きなども個別に設定することができます。

以下のページにエフェクトのデモと設定一覧があるので参考にしてみてください。

公式サイト エフェクト一覧

オプションを追加する際は「function.js」内に記載します。
複数追加するときは、,(カンマ)で区切ることを忘れずにしてください。

$(function() {
$(‘body’).vegas({
slides: [
{ src: ‘./images/penguin.jpg’ },
{ src: ‘./images/tiger.jpg’ },
{ src: ‘./images/wolf.jpg’ },
{ src: ‘./images/fox.jpg’ }
],
delay: 7000,
transition: ‘blur’,
animation: ‘kenburns’
});
});

 

以上でVegas2の使い方の説明は以上です。

比較的簡単に設定することができ、多くのエフェクトも用意されているのでぜひ使ってみてください。

  • このエントリーをはてなブックマークに追加
hulu dTV

関連記事

  1. Web

    目指せ!positionマスター!

    レイアウトに便利なposition!ようこそ!Dreamwea…

  2. CSS Grid Layoutで複雑なレイアウトを3ステップで作成

    Web

    【CSS】Grid Layoutで複雑なレイアウトを作成

    最近、Pinterestのようなギャラリーページなどで大きさが異なる画…

  3. Web

    cssだけで、グラデーション入りのラインを作る!

    cssの擬似要素を使った、グラデーション入りのボーダーラインを作りまし…

  4. htmlcssアイコン画像

    Web

    オススメ!【Animate.css + wow.js 】を使ったスクロールアニメーション

    どうもこんにちは。今回はweb制作で使えるスクロールアニメーシ…

  5. Web

    ハンバーガーメニューはなぜ動くのか!CSSだけ& jQuery使用のコードで確認しよう

    ハンバーガーメニューとはWebサイトを見ていると、右上などにメニュ…

  6. Web

    【CSS】calc()関数で簡単サイズ指定

    今回はcalc()関数についてご紹介します。calc()関数とはC…

人気の記事

CodeCamp

おすすめの参考書

PAGE TOP