パーティクルデザイン
こんな感じの雪のような
パーティクルが飛び交っているデザインです。
まず、こちらよりデータをダウンロードしていただき、
jsファイルを手に入れます。↓↓↓
https://vincentgarreau.com/particles.js/
その中にある
stats.js
particles.js
app.js
を取り出し、任意の位置に置きます。
以下を<head></head>内に書きます。
<!– stats.js –>
<script src=”（ここにパスを入れます）/stats.js”></script>
<script>
var count_particles, stats, update;
stats = new Stats;
stats.setMode(0);
stats.domElement.style.position = ‘absolute’;
stats.domElement.style.left = ‘0px’;
stats.domElement.style.top = ‘0px’;
document.body.appendChild(stats.domElement);
count_particles = document.querySelector(‘.js-count-particles’);
update = function() {
stats.begin();
stats.end();
if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
}
requestAnimationFrame(update);
};
requestAnimationFrame(update);
</script>
<script src=”（ここにパスを入れます）/stats.js”></script>
<script>
var count_particles, stats, update;
stats = new Stats;
stats.setMode(0);
stats.domElement.style.position = ‘absolute’;
stats.domElement.style.left = ‘0px’;
stats.domElement.style.top = ‘0px’;
document.body.appendChild(stats.domElement);
count_particles = document.querySelector(‘.js-count-particles’);
update = function() {
stats.begin();
stats.end();
if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
}
requestAnimationFrame(update);
};
requestAnimationFrame(update);
</script>
続いて以下を<body></body>内に書きます。
<script src=”（ここにパスを入れます）/particles.js”></script>
<script src=”（ここにパスを入れます）/app.js”></script>
<script src=”（ここにパスを入れます）/app.js”></script>
続いて適用させたい要素を選んで、そこに
id=”particles-js”
を書き込みます。
だいたい<container>だったり<body>だったりが多いと思います。
ここで保存したら、
通常は反映されるのですが、
万が一反映されない場合は
生成される<canvas>
がうまく調整されていない場合がありますので、
そんな時の為に
canvas {
display:block;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
こちらをcssに追加します。
これで実装完了です！
※補足です。
確実に再現していただく為に、
“は必ず半角の”にしていただくようにお願いします。
ブログ形式だとどうしても違う”に
変換されてしまうようですので、
必ずエディタ上でshift+”でお願いします。
変換されてしまうようですので、
必ずエディタ上でshift+”でお願いします。
コメントを残す