Particlegroundは、アニメーションする幾何学的な模様の背景を実装できるjQueryプラグインです。
デモは以下ページにてご確認いただけます。
Particlegroundの使い方
ステップ1. Particlegroundのダウンロードと設置
まずはGitHubからParticlegroundをダウンロードします。ダウンロードしたファイルの中から、jquery.particleground.min.jsをサーバーにアップロードしましょう。
ファイルをアップロードしたら、以下のようにjQuery本体とjquery.particleground.min.jsを読み込みます。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.particleground.min.js"></script>
ステップ2. HTMLのマークアップ
HTMLは以下のようにIDを指定しておくだけです。
<div id="particle"></div>
※クラスでもOK
ステップ3. Particlegroundの実行
最後にParticlegroundを実行するためのスクリプトを記述します。記述場所は、</body>の直前で大丈夫です。
<script>
$('#particle').particleground({
dotColor: '#aaa', //ドットの色
particleRadius: 5, //ドットの大きさ
lineColor: '#eee', //線の色
lineWidth: 1, //線の太さ
curvedLines: false, //線の種類。trueで曲線
proximity: 100, //ドット同士がどれくらい近づいたら線で結ぶか
minSpeedX: 0.1, //ドットの横移動の最小スピード
maxSpeedX: 0.7, //ドットの横移動の最大スピード
minSpeedY: 0.1, //ドットの縦移動の最小スピード
maxSpeedY: 0.7, //ドットの縦移動の最大スピード
directionX: "center", //横にドットが流れていく方向。"center" "left" "right"が指定可能
directionY: "center", //縦にドットが流れていく方向。"center" "left" "right"が指定可能
density: 10000, //ドットの密度。数値が少ないほど密度が高い
parallax: true, //マウスの動きに合わせたパララックス
parallaxMultiplier: 5, //パララックスによる動きの大きさ。数値が少ないほど効果が大きい
onInit: function() {}, //初期化が終わったタイミングで実行する処理
onDestroy: function() {}, //削除された後に実行する処理
});
</script>
「#particle」で要素を指定します。
また、指定できるオプションをすべて記述していますので、不要な部分は削除してください。
あとがき
たまにこういったパーティクル背景を実装したサイトを見かけますね。アニメーションする背景で他のサイトと差をつけたい時は、ぜひご活用ください。