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

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

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

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

1. Supersized

supersized.jpg
https://github.com/buildinternet/supersized

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

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

2. FSSlider

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

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

3. FullScreen Background Slider (FSB Slider)

fsb.jpg
http://pantherius.com/fullscreen_background_slider/

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

4. Vegas

vegas.jpg
http://vegas.jaysalvat.com

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

5. Fullscreener

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

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

6. Maximage

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

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

7. Backslider

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

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

8. MightySlider

ms.jpg
https://mightyslider.com

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

まとめ

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