以前紹介した「Particleground」と同じようなプラグインです。
ページの背景で分子状のものがアニメーションします。
【jQuery】ページの背景に分子的な幾何学アニメーションを実装できるプラグイン-Particlegroundの使い方-
ただ、この「Particles」の方が、個人的にはカッコイイ
以前はスマホでは動かないようだったので、「Particleground」の方がいいかなと思ってましたが、
スマホでもちゃんと動くようになってました。
以下、使い方です。
ダウンロード
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
簡単に実装できて、インパクトある動きが実装できます。
細かい設定もできてオススメです。
あんまり目立たせず、さりげなく入れるといいかもしれませんね。