jQueryでWebサイトの背景をおしゃれにする

こんにちは、第7回ウェブラボ技術メモです。

今回は、Webサイトの背景をおしゃれにするプラグイン『Particleground』を実装してみたいと思います。

『Particleground』は、パーティクルアニメーション(コンピュータグラフィックの技術のひとつでパーティクル(粒子)を沢山発生させて動かす仕組み)を表示するプラグインです。また、マウスカーソルに追従して動く視差効果(パララックス)の機能もあります。

配布ページはこちら

では、早速実装してみましょう。

今回もjQueryのプラグインを使用しますのでjquery.jsも一緒に読み込ませます。

head内は、背景を表示させたい要素を忘れずに指定してあげましょう。また、ここでドットの色などのオプションなどを指定することも出来ます。

■HTML head内

HTMLはhead内と同様に背景を表示する要素を記述します。

■HTML

CSSでは主に背景色を指定し、必要に応じて幅や高さなどの調整を行いましょう。

■CSS

完成したデモはこちらです。

いかがでしょうか、背景がパーティクルアニメーションになり、とてもおしゃれになっています。

他にもオプションで、particleの流れる速さやドット間の線を曲線にしたり、自分好みにカスタマイズすることも可能です。

ちなみに対応ブラウザは、Google Chromeなどのモダンブラウザ、Internet Explorer 9以降、スマートフォンではiOS 7.1のSafari、Android 4以降のものに対応してるみたいです。それ以外の古いブラウザなどはアニメーションが表示されず背景色のみとなってしまいます。

古いブラウザなんて気にしないよという人は一度試してみてはどうでしょうか?

以上、ウェブラボ技術メモでした。

  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。