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

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

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

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

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

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

Link

Attention Required! | Cloudflare

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

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

particles.js

Link

302 Found

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

Github - Vincentgarreau/Particles.js: A Lightweight Javascript Library For Creating Particles

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

301 Moved Permanently

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

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

カスタマイズの参考

Link

Particles.jsを使って簡単に幾何学的なアニメーションを作る | 株式会社lig(リグ)｜Dx支援・システム開発・web制作

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

RailsでParticles.jsを使ってみた #ruby - Qiita

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

Particleground

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

Link

Particleground Demo

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

カスタマイズの参考

Link

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

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

Link

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

301 Moved Permanently

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

Webサイトに華やかな表現を！ Html5用パーティクルライブラリ「Particlejs」を公開 - Ics Media

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

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

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

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

Link

jQuery Webgl Ripples

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

PAGETOP