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

目次

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

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

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

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

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

javascript - how to create shapes around mouse cursor? - stack overflow

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

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

particles.js

particles.js - a lightweight javascript library for creating particles

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を使って簡単に幾何学的なアニメーションを作る | 東京上野のweb制作会社lig

https://liginc.co.jp/191958

Particleground

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

particleground demo

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

カスタマイズの参考

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

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

背景にひと手間加えたい時に便利なスクリプト 10+ | nxworld

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

creat.jsとparticle.jsで波のエフェクトを作成する - qiita

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

前へ

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

次へ

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