【JavaScript】particle.jsで分子アニメーションを実装

こんにちは、元調剤薬局の薬剤師、今は福井県福井市でホームページ制作をやっている@ジョウです。

今回の記事は、particles.jsというプラグイン。備忘録として、簡単に使い方をまとめてみました。

スポンサーリンク

particles.jsとは?

このプラグインは、薬学部の有機化学の授業で見たような、高分子のアニメーションを作ることができます。マウスをホバーすると、分子が反発したり、近づいてきたりといった実装をすることも可能です。

このアニメーションを実装しているサイトをたまに見かけるので、今回作り方を調べました。このYouTubeがとても参考になります。英語ですが、わかりやすいのでおすすめです。

公式サイトはこちら

HTMLの書き方

HTMLは以下。

</body>の直前で、particles.min.jsを読み込むこと。

そして、このプラグインは、jsonファイルでオプションを設定していくので、そのファイルも読み込む必要もあります。

jsonファイルの書き方

jsonファイルで設定するオプションは、このGithubを参考にしてください。細かな値が書いてあります。

keyの項目に、『particles.number.value』、option typeの項目の『number』と書いてある場合は、

という感じで書いていきます。

オプションの主な内容は以下の通り。

particleのオプション

  • number:分子の数
  • color:分子の色
  • shape:分子の形
  • opacity:透明度
  • size:大きさ
  • line_linked:分子同士のつながり
  • move:動き

interactivityのオプション。

  • events:ホバーやクリックしたときの動き
  • modes:eventsの設定ごとの追加オプション指定

それぞれの値を設定していくと以下のような感じになります。

以上になります。

スポンサーリンク

おすすめ記事

フォローする