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

2014.12.15　Posted by Coding_team

Webプログラミング

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

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

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

配布ページはこちら

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

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

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

■HTML head内

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.particleground.min.js"></script>
<script>
$(document).ready(function() {
	$('#particles').particleground({     //背景を表示したい要素の指定
	dotColor: '#f89e9e',                 //ドットの色を指定
	lineColor: '#f89e9e',                //ドットをつなぐ線の色を指定
	density:'4000'                       //生成されるparticleの密度を指定
	});
});
</script>

$(document).ready(function() {

$('#particles').particleground({ //背景を表示したい要素の指定

dotColor: '#f89e9e', //ドットの色を指定

lineColor: '#f89e9e', //ドットをつなぐ線の色を指定

density:'4000' //生成されるparticleの密度を指定

});

</script>

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

■HTML

<div id="particles">　　//背景を表示させる要素
　　　//本文
</div>

<div id="particles">　　//背景を表示させる要素

　　　//本文

</div>

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

■CSS

#particles {
	background: #f84848;　//背景の指定
　　　　//必要に応じて高さ、幅などの調整を追加
}

#particles {

background: #f84848;　//背景の指定

　　　　//必要に応じて高さ、幅などの調整を追加

}

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

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

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

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

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

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

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