[JS]かっこいい!ブラウザや要素いっぱいに背景画像やスライドショーをアニメーションで表示するスクリプト -Vegas 2

画像をブラウザやDOM要素の背景いっぱいに表示し、フル表示の画像にかっこいいエフェクトを加えたり、スライドショーを設置できるjQuery/Zeptoのプラグインを紹介します。

アニメーションやオーバーレイが数多く用意されており、画像にスタイリッシュなエフェクトを加えることが簡単にできます。

サイトのキャプチャ

Vegas 2
Vegas -GitHub

Vegas 2は以前紹介した1の単なるバージョンアップではなく、大きく進化しました。
※1との互換性はありません。

Vegas 2のデモ

デモでは写真画像をブラウザや要素の背景としてフル表示し、スライドショー機能を伴ったコンテンツを楽しめます。

サイトのキャプチャ

デモページ -Sin City

映画「Sin City」を使ったデモページ。
※画像使っても大丈夫?と思ったらDeveloper Toolkitというのがあるんですね。

Documentのページでは、さまざまなエフェクトを楽しめます。

サイトのキャプチャ

Doc -Transitions

画像切替時のエフェクトは24種類。

サイトのキャプチャ

Doc -Animations

表示方法にも多彩なエフェクトが用意されています。

Vegas 2の使い方

Step 1: 外部ファイル

当スクリプト・スタイルシートとjQueryを外部ファイルとして記述します。

<head>
  ...
  <link rel="stylesheet" href="http://jaysalvat.github.io/vegas/releases/latest/vegas.min.css">
</head>
<body>
  ...
  コンテンツ
  ...
  <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script src="http://jaysalvat.github.io/vegas/releases/latest/vegas.js"></script>
</body>

Zeptoのプラグインとしても動作します。

Step 2: JavaScript

背景として表示する画像を指定し、スクリプトを実行します。
ブラウザ全体の場合はbodyを指定し、エレメントの場合はidなどを指定します。

$(function() {
    $('body').vegas({
        slides: [
            { src: 'img1.jpg' },
            { src: 'img2.jpg' },
            { src: 'img3.jpg' }
        ]
    });
}

Settingのページでは、リアルタイムにさまざまなオプションを試すことができます。
オーバーレイのパターンも数多く用意されています。

サイトのキャプチャ

Setting -Overlays

top of page

©2017 coliss