ウィンドウいっぱいの背景に画像や動画を配置したり、ランダムなパーティクルやラインを表示させるなど、主に背景周りで使えそうものや「この領域に何かもうひと手間加えたい…」という時に便利そうだと思うスクリプトを幾つかまとめてみました。jQueryプラグインが多めですが単体で動かすことができるものもあり、実装方法などに関しても容易にできるものが多いと思います。
背景にひと手間加えたい時に便利なスクリプト 10+ 目次
- 背景に画像や動画のスライドショーを実装できる「Vegas」
- ブラウザいっぱいに動画を表示できる「CoverVid」
- アニメーションするパーティクルを実装できる #1 「Particleground」
- アニメーションするパーティクルを実装できる #2 「particles.js」
- アニメーションするポリゴン背景を実装できる「Geometryangle」
- グラデーションを重ねたような背景を実装できる「SHARDS」
- イメージのドミナントカラーを親要素に指定できる「jquery.adaptive-backgrounds.js」
- 背景色を次々に変化させることができる「Spectrum jQuery Plugin」
- 様々なテーマの背景を表示できる「quietflow.js」
- SVGを使って様々なパターンを生成する「Textures.js」
- 背景にラインをランダム表示させる「Lines.js」
- ジャイロスコープにも対応したパララックスを実装できる「parallax.js」
1. 背景に画像や動画のスライドショーを実装できる「Vegas」
背景にブラウザいっぱいのスライドショーを実装することができるjQueryプラグインで、画像だけでなく動画を埋め込むこともできます。
また、オプションを変更することでスライドの動きにアニメーションを付けたり、用意されているパターンをオーバーレイで表示させたりすることもできます。
2. ブラウザいっぱいに動画を表示できる「CoverVid」
こちらはブラウザいっぱいに動画を表示させることができるjQueryプラグインで、軽量なのも特徴です。
オプションが豊富に用意されているわけではないのですが、表示サイズを変更することはオプションで指定できます。
「CoverVid」と同じように動画を背景に表示できるものは他にもあり、いずれもjQueryプラグインではありますが他にも以下のようなプラグインがあります。
基本的には同じような動きのものばかりですが、ブラウザサポート・レスポンシブ対応・スマートフォン（タブレット）対応・YouTubeやVimeoの動画に対応などプラグインによって違いがあったり、人によって使いやすいものも異なってくると思うので、これっていうのがない人は幾つか試してみると良いと思います。
Vide – easy as hell jQuery plugin for video backgrounds
tubular, a YouTube Background Player jQuery Plugin | Sean McCambridge Design
3. アニメーションするパーティクルを実装できる #1 「Particleground」
背景にアニメーションするパーティクルを簡単に実装することができるスクリプトで、単体で使うこともjQueryプラグインとして使うこともできます。
実装も表示させたい箇所を指定して呼び出すだけと簡単で、オプションもドットやラインのサイズ・カラー指定、表示位置や密度、マウスに合わせて動くかどうかの指定などひと通り揃っています。
4. アニメーションするパーティクルを実装できる #2 「particles.js」
同じく背景にアニメーションするパーティクルを簡単に実装することができるスクリプトで、こちらはjQueryプラグインではなく単体で使うものになります。
こちらのスクリプトもオプションがいろいろと用意されており、デモページではこれらのオプションを任意で変更して実際にどのような表示になるのかを確認できるようになっています。
5. アニメーションするポリゴン背景を実装できる「Geometryangle」
こちらはアニメーションするポリゴン背景を実装することができるスクリプトで、単体で使うこともjQueryプラグインとして使うこともできます。
ポリゴンとはいっていますが、用意されているオプションをいろいろいじっていけばポリゴン以外の見た目のアニメーション背景も実装することができます。
6. グラデーションを重ねたような背景を実装できる「SHARDS」
ランダムで生成されるグラデーションレイヤーを重ねたような背景を実装することができるjQueryプラグインです。
ランダムといってもオプションでどのカラーをベースにするか選択でき、その他明るさ・透明度・重なるカラー数などを指定可能です。
7. イメージのドミナントカラーを親要素に指定できる「jquery.adaptive-backgrounds.js」
イメージのドミナントカラーを親要素に指定できるjQueryプラグインで、まさにデモページのようにイメージのカラーによってそれぞれ背景色を異なるものにしたい時など非常に便利です。
イベントとコールバックも用意されているので、これらを使っていろいろな見せ方ができそうですね。
8. 背景色を次々に変化させることができる「Spectrum jQuery Plugin」
背景色が次々に変化していく動きを実装できるjQueryプラグインで、切り替えるスピードや表示させるカラーを指定することができます。
9. 様々なテーマの背景を表示できる「quietflow.js」
ランダムに配置された三角形やバウンドするボールなど、9種類の背景を実装できるjQueryプラグインです。
それぞれどのようなものが表示されるのかはデモのセレクトで切り替えれば確認することができ、それぞれのテーマで設定できるオプションが異なります。
10. SVGを使って様々なパターンを生成する「Textures.js」
SVGを使ってシンプルなパターンを生成・表示させることできるスクリプトで、ライン・サークル・パスの大きく分けると3パターンあります。
デモページでも実装方法が多数紹介されていますが、それぞれの値を変更することで他にも様々なパターンを作れます。
11. 背景にラインをランダム表示させる「Lines.js」
背景にラインをランダム表示させるスクリプトで、ラインの数やカラーを指定することができます。
12. ジャイロスコープにも対応したパララックスを実装できる「parallax.js」
マウスに合わせて要素が動いたり、スマートフォンなどジャイロスコープに対応したデバイスであれば傾けることで要素を動かしたりすることができるスクリプトで、jQueryプラグインとして実装することもできます。
デモを見ると実装が難しそうな感じもありますが簡単に実装可能で、オプションで動きの大きさや範囲を指定することもできます。