JS等でアニメーションを作りたいです。

Question

こちらのリンクのウィルスが動いているアニメーションを自分で実装したいです。

現在の状況はdivのなかでparticles.jsを実装しようとしています。
そしてそのparticles.jsの点を画像としてウィルスに変更しようとしているのですがこちらがうまくいかない状況です。
上下運動だけでしたらcssだけでも実装できるのですが、
お客様からの要望はこちらのサイトの様なアニメーションにして欲しいとのことです。

こちらのサイトです

particles.jsの形を変更することで実装することはできないのでしょうか？
また出来ないのであれば他の解決方法を知りたいです。
よろしくお願いいたします。

Comments

[m.ts10806]

「作りたい」とだけあって、自身が調べたこと試したことが何もないですが、問題・課題は何でしょうか。
目の前にあるので解析するところからと思いますが・・
https://ascii.jp/elem/000/000/999/999122/

あとリンク文言が非常に怪しいです。調整された方が良いかと思います。

[yoorwm]

確かに、この文言だと宣伝と勘違いする人が居てもおかしくなさそうですね

[Anri_Hani]

皆様申し訳ございません。
ご指摘ありがとうございます！
詳細に書きます！

Answer 1

難読化されていない素直なコードでしたので、比較的読みやすいのではないでしょうか？
Circle2関数あたりがそれだと思います。

https://www.toshiba-tmat.co.jp/res/renecat/common/js/animation.js

Comments

[Anri_Hani]

こんなコードを見ることができるのですか！
ディベロッパーツールでHTMLとCSSを見る手法しか知らないのですがこちらを調べる方法も教えていただけますか？
ご回答ありがとうございます！

[Lhankor_Mhy]

ディベロッパーツールの「Sources」タブです。

[m.ts10806]

リンク提示したのに・・・
https://ascii.jp/elem/000/000/999/999122/

[Lhankor_Mhy]

あー……

[Anri_Hani]

ありがとうございます！

Answer 2

svgでオブジェクトをいくつかおいて、適当なポイントを中心にまわしたり
透明度をかえたり、サイズをかえたりすればいいでしょう