背景に幾何学的なアニメーションを表示するparticles.js

目次

ドメインの所有者を調べる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

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

particles.js

302 found

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

github - vincentgarreau/particles.js: a lightweight javascript library for creating particles

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

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

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

カスタマイズの参考

particles.jsを使って簡単に幾何学的なアニメーションを作る | 株式会社lig

https://liginc.co.jp/191958

Particleground

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

particleground demo

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

カスタマイズの参考

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

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

301 moved permanently

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

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

前へ

いつかマネしたい好みの効果のあるクールなサイトのメモ

次へ

Malicious Software Removal Toolは悪意のあるソフトウェアの削除ツールだった。