[JS]かっこいい！ブラウザや要素いっぱいに背景画像やスライドショーをアニメーションで表示するスクリプト -Vegas 2
Post on:2015年3月19日
sponsors
画像をブラウザやDOM要素の背景いっぱいに表示し、フル表示の画像にかっこいいエフェクトを加えたり、スライドショーを設置できるjQuery/Zeptoのプラグインを紹介します。
アニメーションやオーバーレイが数多く用意されており、画像にスタイリッシュなエフェクトを加えることが簡単にできます。
Vegas 2は以前紹介した1の単なるバージョンアップではなく、大きく進化しました。
※1との互換性はありません。
Vegas 2のデモ
デモでは写真画像をブラウザや要素の背景としてフル表示し、スライドショー機能を伴ったコンテンツを楽しめます。
映画「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
sponsors
