アメーバみたいにうねうね動くやつ、あれ「パーティクル」って言うんですね。

簡単に実装出来る方法ないかなと色々調べたところ、以下のJSライブラリが最強に簡単だったので共有します。

▼particles.js
https://vincentgarreau.com/particles.js/

サイトにアクセスするとまず目に入るのがパーティクル!←言いたいだけ
右には何やらオプションメニューが。
ここでデフォルトの背景色や、ホバーした際にアメーバが逃げる設定を変えられます。

particles.jsスクリーンショット

ぽちぽち変えた設定がすぐに視覚的に確認できるのも分かりやすい!

ちなみにセレクトメニューにある「Default」以外にも、
・NASA
・Bubble
・Snow
・Nyan Cat

などがあります!
Nyan Cat入れてくるあたりユーモアあって好きw

実装方法

さて、理想としていたパーティクルができたら、その実装方法を説明しますね。

オプションメニューの一番最後から2番目、
「particlesjs-config.json」をダウンロード!

ここで注意なんですが、「.json」ファイルを「.js」で保存してください。
次に「particlesjs-config.js」をエディタで開いて、元々ある記述の上下に、
以下を記述して囲ってあげてください。
particlesJS('test',
);

全体的に見るとこんな感じで~

particlesJS('test',
 //元々あった記述ここから
 {
   "particles": {
  ~~省略~~
  "retina_detect": true
 }
 //元々あった記述ここまで
);

次に、JSファイルをFTPにアップしてJSを読み込ませてください。

パーティクルを出力させたい要素に、

id="test"

を付け加えてください。

次にCSSで#testに対してheightやwidthを指定。
パーティクルを背景にしたい場合は、positionで調整。

こんな感じで簡単に実装できます。