1. HOME
  2. デザイン
  3. 幾何学的なアニメーションの実装

幾何学的なアニメーションの実装

デザイン

粒子でできたような幾何学状のアニメーションの実装方法を私の備忘録も兼ねて紹介します。


1. ダウンロード


今回実装するのは、particles.jsです。
particles
上のリンク先の ”Download” をクリック。


2. 読み込み


ダウンロードしたファイル内の "particles.min.js" と "app.js" を読み込みます。
app.jsは「demo > js > 」の手順で探してください。

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

これらをbody最下部に記入し読み込みます。
様々な位置で試してみましたが最下部にあるときにしか反応はしないようです。
軽量なものですが、表示速度も考え読み込み位置はbody最下部に。

3. HTML 側

空divを用意します。このとき id 「particles-js」をつけます。

<div id="particles-js">
</div>

※例外※
・「app.js」を使わずに自分で設定する方はもちろん違うid名で。
別のid名にしたい場合。
 →divに別のid名を使用した場合は「app.js」内のid名も変えることを忘れないように。


4. CSS 側


特に背景をつけなければいけないわけではないですが、
「app.js」での初期の設定ではすべて白で描写されるので、
    背景色 or  背景画像
をつけると実装されているかの確認が容易にできます。

|s| body{
   background-color:#888;
   }

     OR

body{
   background: url(画像URL) no-repeat;
   /*background-size:cover; 必要に応じてつける*/
   }

5. 詳細を設定する

「app.js」の数値などを変更していけば自分の好きなように設定できます。
JSのタブ内のソースは「app.js」に
特に使われそう、使いそうなものをコメントアウトで説明を表記しておいたものです。

↓デモ↓

See the Pen Particleground by miki hayashida (@hmiki) on CodePen.


こんな感じに
「particles.js」はダウンロードで簡単に実装できるのでぜひお試しください。
ダウンロードはこちら↓
particles


JS
jQuery
備忘録

この記事を読んだ方におすすめ