Geometry Animation on Site Header Background

星座のような動く幾何学模様のアニメーション背景をヘッダーに

Geometry Animation on Site Header Background

動く幾何学模様のテンプレート

マウスでポインタを近ずけたり、クリックするとアクションを起こすJavascriptが組み込まれています。ドットの形を多角形に変えたり、ランダムに動く星の数を増やしたり、背景の色やドットの色を変えることもできますが、あまり複雑な動きをさせるとCPUに負担がかかるので、ページの読み込み速度が遅くなったり、マシンによっては動きが遅くなったりします。

動く幾何学模様をサイトへ設置する方法

まず、下記サイトで色や形や動きを右メニューから選んで、ZIPファイルをダウンロードします。

particles

zipファイルを展開したら「particles.js」とdemo > js >「app.js」を取り出して、あなたのサイトのJSが格納されているフォルダへ

下記のコードをhtml > body内の設置したい場所へ

<div id="particles-js"></div>

下記のJS読み込みコードを<body></body>内へペースト。hoge部分は設置するディレクトリに書き換えてください。body内最下部、footer手前が良いでしょう。

<script src="hoge/js/particles.js"></script>
<script src="hoge/js/app.js"></script>
<script src="hoge/js/lib/stats.js"></script>