jQueryプラグイン
Pocket

以前紹介した「Particleground」と同じようなプラグインです。

ページの背景で分子状のものがアニメーションします。

【jQuery】ページの背景に分子的な幾何学アニメーションを実装できるプラグイン-Particlegroundの使い方-

ただ、この「Particles」の方が、個人的にはカッコイイ

以前はスマホでは動かないようだったので、「Particleground」の方がいいかなと思ってましたが、
スマホでもちゃんと動くようになってました。

Particles

デモサイト

以下、使い方です。

ダウンロード

Particlesのサイトから、ど真ん中にあるDownloadをクリック。
ファイル一式をダウンロードします。

Particles

読み込み

ダウンロードしたZipファイルを解凍したファイルの中にある「particles.min.js」と
さらにdemoファイルの中のjsファイルの中にある「app.js」を読み込んでおきます。

<script src="particles.min.js"></script>
<script src="app.js"></script>

app.jsの中の記述は、自分で管理しているjsファイルに追記しても大丈夫と思いますが、
せっかく用意されているので、別で読み込んで管理した方がよさそうです。

html

HTMLでは動きをつけたいところにidをふっておきます。

<div id="particles-js">
<h1>メインビジュアル</h1>
</div>

CSS

必須ではないですが、先ほどの#particles-jsに
background-colorなどで、背景色を設定しておきます。

#particles-js {
	background-color: #2e3b4e;
}

app.jsの中身で設定

app.jsの中でいろいろ設定ができます。

例えば、colorでは粒の色を設定できます。

"color": {
     "value": "#00bfff"
},

shapeでは粒の形を変えられます。
デフォルトではcircleになっています。

"type": "circle"

他にも以下のようなものが用意されています。

  • edge 四角
  • triangle 三角
  • polygon 五角形
  • star 星

imageでオリジナルもできるっぽいです。

ほかにも
sizeのvalueで粒の大きさを調整したり、moveのspeedで動く速度の調整もできます。

最後に、eventsでマウスオーバー時の粒子の動きを設定できます。
これがまた面白い

"events": {
        "onhover": {
          "enable": true,
          "mode": "repulse"
        },

デフォルトは、「repulse」で、
マウスオーバーすると粒子は逃げていきます。

grabだと、粒子がカーソルにくっついてきて、
bubbleでは、マウスオーバーした粒子が膨らみます。

詳しくは公式サイトの右上のメーターで調整しながら、確認できます。

Particles

簡単に実装できて、インパクトある動きが実装できます。

細かい設定もできてオススメです。

あんまり目立たせず、さりげなく入れるといいかもしれませんね。

記事一覧へ

Pocket

カテゴリー: タグ: