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

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

アニメーションする幾何学的な模様の背景を実装できるjQueryプラグイン「Particleground」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加

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

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

あとがき

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

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。