2020年5月31日

Fashionable Generative Motion Graphics into your Site

— particles

1960年代に流行したモッズのワンピースの柄のような、1980年代に流行したアバンギャルドでポップな、シャア専用ドムのような六角形のカラーリング。

PRADAのデザインを意識して、大胆でサイバーパンクな色合いにデザインしてみました。

particle.js を使って、六角形の大きさがランダムに動くモーショングラフィックス（ジェネレーティブ・アート）をサイトのページに導入できます。

Particle.js

まずは、下記サイトでオブジェクトの形や色、数や大きさ、背景などをお好みに調整して、GitHub ボタンを押すと、GitHub のページに HTML, CSS, JS が表示されます。

オブジェクトは、星型、円、多角形、自前の画像などに変更可能ですし、背景も画像に変更することができます。

マウスホバーやクリックによって、オブジェクトの数が増えたり、消えたりするインタラクティブも設定できます。

HTML をそのままコピペして、自分のサイトに貼付けます。

CSS は、<head></head>内にコピペします。

JS は、HTML 内の <body></body> 内の一番下にでも貼付けましょう。

CSS を調整します。デフォルトでは position: absolute になっているので、レイアウトが崩れるかもしれません。このページでは、absolute を解除して、タイトルを abusolute に設定しているので、グラフィックの上に文字が乗っています。

複雑な動きや、Particles が多くなるとCPUに負担がかかるので注意が必要です。