アニメーションする幾何学的な模様の背景を実装できるjQueryプラグイン「Particleground」

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」で要素を指定します。

また、指定できるオプションをすべて記述していますので、不要な部分は削除してください。

あとがき

たまにこういったパーティクル背景を実装したサイトを見かけますね。アニメーションする背景で他のサイトと差をつけたい時は、ぜひご活用ください。