インパクト抜群！フルスクリーン背景を実装するときに便利なjQeuryプラグイン9選

jQueryプラグインのよいところは、プラグインを読み込んで簡単な設定さえ行えば誰でも高品質なホームページが作れてしまうところです。
グラフを作成したり、テキストや写真にアニメーションを加えたりするものもありますが、特に面倒な作業を簡単にしてくれるプラグインのひとつが、背景に関するものです。

今回は、フルスクリーンでユニークな動きをするjQueryプラグインの中で特にオススメのものをご紹介します。
フルスクリーン背景を単に実装するだけならCSSを設定するだけでできますが、背景をスライドショーのように表示したり、スクロールに連動して動くようなデザインにしたりする場合は、jQueryプラグインの力を借りたほうがより早く綺麗なホームページを作ることができるでしょう。

今回ご紹介する9つのプラグインの中で、ぜひご自身のホームページに使えそうなものを探してみてください。

フルスクリーン背景を実装するときに便利なjQeuryプラグイン

1. Supersized

https://github.com/buildinternet/supersized

Supersizedは背景スライドショーにも対応したjQueryプラグインです。
自動で画面の表示比率から画像をリサイズし、あらかじめスライドショーで使う写真を読み込んでおくことで、スムーズなスライドショーを表示することができます。

単にスライドショーを表示するだけであれば他にもたくさんのプラグインがありますが、Supersizedではキーボードによる操作も設定によって可能です。
また、Flickrアカウントと連携しておくことで、毎回Flickrから画像を読み込んでランダムで表示することもできます。

2. FSSlider

https://codecanyon.net/item/fsslider-a-fullscreen-slider-for-your-background/158909

FSSliderはユニークなトランジション効果を搭載した背景スライダーを実装するためのプラグインです。
面白い切り替え表示のアニメーションが13種類用意されています。
ミニマルなナビゲーションで操作することができ、ナビゲーションは自動で隠すこともできます。

3. FullScreen Background Slider (FSB Slider)

http://pantherius.com/fullscreen_background_slider/

FullScreen Background Sliderは、CSS3のトランジション効果を使った背景スライダーを簡単に実装できるjQueryプラグインです。
36のアニメーションの種類、20種類以上のアニメーションパターンとカスタマイズ可能なタイミングによって、モダンでクールな背景スライダーを実装することができます。

4. Vegas

http://vegas.jaysalvat.com

Vegasは24種類のトランジション効果と10種類のアニメーション効果が実装されたjQueryプラグインです。
再生や巻き戻しなどのメソッドも用意されているので、独自にナビゲーションメニューをUIから実装することも可能です。

5. BigVideo.js

http://dfcb.github.io/BigVideo.js/

BigVideo.jsは背景に無声動画再生も可能なjQueryプラグインです。
一般的に背景に動画を設定するのは面倒ですが、このプラグインを読み込むことで、以下のコードのように簡単に背景動画を実装することができます。

$(function() {
　　var BV = new $.BigVideo({useFlashForFirefox:false});
　　BV.init();
　　BV.show([
　　　　{ type: "video/mp4",  src: "vids/river.mp4" },
　　　　{ type: "video/webm", src: "vids/river.webm" },
　　　　{ type: "video/ogg",  src: "vids/river.ogv" }
　　]);
});

また、1つのビデオだけではなく複数のビデオを設定してトランジション再生することも可能です。
途中で再生を止めるときも、

BV.getPlayer().pause();

というメソッドを実行するだけで止めることができます。

6. Fullscreener

http://vvasilev-.github.io/fullscreener/

Fullscreenerはシンプルな代わりに非常に軽量なjQueryプラグインです。
アニメーションやトランジションはありませんが、CSSで複雑な設定をしなくともレスポンシブ対応の全面画像背景のホームページを非常に簡単に作成することができます。

7. Maximage

http://blog.aaronvanderzwan.com/2012/07/maximage-2-0/

Maximageは画像だけでなくHTML5ビデオやYouTubeビデオにも対応したjQueryプラグインです。
画像をあらかじめ読み込むプレロード機能、リサイズ可能なレスポンシブ機能に加え、IE7.0を含むあらゆるモダンブラウザでも表示が可能です。

8. Backslider

http://plugins.gravitysign.com/backslider/

Backsliderはエレガントでスムーズな動きをするjQueryプラグインです。
5つの切り替えモード、4つのエフェクト、2つのスピードを組み合わせて背景を切り替えることができます。
そのほか、20以上を超える設定によって複雑な動きを実装することも可能です。

9. MightySlider

https://mightyslider.com

Mighty Sliderはウィンドウの高さに合わせたスライダーを実装できるプラグインです。
高さに合わせる、という点では、これまでご紹介した背景スライダーとは違ってスクロールによって「Below the fold」(ファーストビューで見えない、いわゆる「折り目」より下)部分を表示することができます。
ビデオギャラリーやカルーセルなど、さまざまな形で動画や画像を表示することが可能です。

まとめ

ページ上のオブジェクトとは違って、背景はヘッダーなどもいじる必要があるので、設定するのがやや面倒に感じる人もいるでしょう。
jQueryプラグインを使えば、簡単に実装できるので時間短縮になるだけでなく、自分ではなかなか実装できないユニークな動きをホームページに簡単に取り入れることができます。
お気に入りのプラグインが見つかったら、ぜひお気に入りに追加しておきましょう。