背景をスライドするjQueryプラグイン「Vegas2」が格好良い！

テーマ「ShapeShifter」でダウンロードリンク用のウィジェットを作成しようとし、背景だけスライドするプラグインってないかなぁと探していると、すごく格好良いjQueryプラグインが見つかりましたので実装予定です。

ヘッダーに設置したのは下にあるようなウィジェットで、スクリーンショットは背景が回転しながらフェイドインしてくるアニメーション「swirl」しているところです。

とこんな感じです。

設定での微調整がまだ完全ではないので、ダウンロードリンクはまだ更新していませんが、これも直にテーマ「ShapeShifter」に実装する予定です。というか、テスト環境ではすでに実装されています。

背景をスライド

僕は「bxSlider」などのスライドさせるプラグインは使ったことがあるのですが、この場合、スライドアイテム（imgタグなど）を出力する必要があり、複数のコンテンツを同じ個所で見せる分には使えるのですが、1つのコンテンツで背景をスライドさせるには不向きでした。

どんな動きをするのか見てみると、正確にはラッパーのスタイルの「background-image」などを操作しているのではなく、ラッパー内にdivタグを生成して、スライド式の背景となっています。

使い方

まずは「jQuery」のプラグインですから、jQueryを読み込む必要があります。

<script src="https://code.jquery.com/jquery.min.js"></script>

もしくは「Zepto」でも大丈夫です。

<script src="https://zeptojs.com/zepto.min.js"></script>

ローカルにある場合はそちらを指定してください。

「Vegas Background SlideShow」のダウンロードリンクから「Vegas2」をダウンロードし、「CSS・JSファイル」をインクルードします。

<link rel="stylesheet" href="/js/vegas/vegas.min.css">
<script src="/js/vegas/vegas.min.js"></script>

準備はこれだけです。

あとは背景をスライドさせたい要素のセレクタに使用するだけです。

$( "body" ).vegas({
    slides: [
        { src: "/img/slide1.jpg" },
        { src: "/img/slide2.jpg" },
        { src: "/img/slide3.jpg" },
        { src: "/img/slide4.jpg" }
    ]
});

この場合だと、bodyへの背景として出力されます。

スライド効果が豊富

スライド時に与えることが出来る設定が豊富で、切り替える時の変化方法やアニメーションも複数用意されているだけでなく、自分で設定したCSSアニメーション設定を「animationRegister」で登録してスライドの効果として実装することもできます。

更にオーバーレイやイベントコールバックも設定でき、実は画像だけでなく「mp4」などの映像ファイルにも対応しています。

「Settings – Documentation – Vegas Background SlideShow」に詳しく記載されていますので、実装の際は目を通すことをお薦めします。

さいごにおまけ

個人的にはダウンロードボタンに最適だと判断しました。説明などが背景画像に載っていれば、ボタン１つ設置しておくだけでスペースいらずで解説してくれますからね。

作成しているウィジェットのスクリーンショットでは、「デモページ」とカタカナで書いておきながら、アルファベットで「Download」と書いていて、スクリーンショットを撮って気付きました。ええ、更新する前にちゃんとどっちかに統一します。

追記（2016/01/11）：
当サイトのサイドバーにダウンロードリンクを設置しましたので、参考にしていただければと思います。
イメージは今までサムネイルで使用したことのあるものからランダムに選んでいます。

追記（2016/04/20）：
この下にVegasのサンプルを用意しました。