ドメインの所有者を調べるWhoisサイトのdomaintools.comを見て気になったマウスカーソルに合わせて動くワイヤーフレームのような幾何学模様のアニメーションについて調べてわかったことをメモ。

「particles.js」というやつらしいです。

jQweryやCSSでできるやつかと思って蜘蛛の巣とか、ラインアートとか、ワイヤーフレームとかポリゴンとか組み合わせてかなり検索しましたが見当たらず、domaintools.comのソースを見ていると以下のソースが気になりました。

<canvas id="spiders" class="hidden-xs"></canvas>

そこでspidersを検索すると同じように探している方がいるようで海外の質問サイトのページがヒットしました。

http://stackoverflow.com/questions/28567642/how-to-create-shapes-around-mouse-cursor http://stackoverflow.com/questions/28567642/how-to-create-shapes-around-mouse-cursor

ここでparticles.jsということがわかりました。

particles.js

http://vincentgarreau.com/particles.js/ http://vincentgarreau.com/particles.js/

https://github.com/VincentGarreau/particles.js/ https://github.com/VincentGarreau/particles.js/

http://codepen.io/VincentGarreau/pen/pnlso http://codepen.io/VincentGarreau/pen/pnlso

domaintools.comは少し違う動きをしていますが、多分カスタマイズしているんだと思います。

カスタマイズの参考

https://liginc.co.jp/191958 https://liginc.co.jp/191958

https://qiita.com/sapisapi/items/17a1ee6fc539fb104397 https://qiita.com/sapisapi/items/17a1ee6fc539fb104397

Particleground

particles.jsと同じようなParticlegroundというのも見つけました。

http://jnicol.github.io/particleground/ http://jnicol.github.io/particleground/

カスタマイズの参考

https://blog.mismithportfolio.com/web/20150129particleground https://blog.mismithportfolio.com/web/20150129particleground

他にも気になるスクリプトのまとめ

http://www.nxworld.net/tips/background-custom-and-effect-scripts.html http://www.nxworld.net/tips/background-custom-and-effect-scripts.html

http://qiita.com/syui/items/f0baae5cdb4bfd193e35 http://qiita.com/syui/items/f0baae5cdb4bfd193e35

https://ics.media/entry/11172/ https://ics.media/entry/11172/

https://www.webcreatorbox.com/tech/javascript-particles https://www.webcreatorbox.com/tech/javascript-particles

水面に波紋が広がるようなもの

jQueryのファイルとjQuery Ripplesのファイルを読み込めばOK。

http://sirxemic.github.io/jquery.ripples/ http://sirxemic.github.io/jquery.ripples/