2020年5月29日
The Motion Graphics JavaScript Code Art into Your Site
The Motion Graphics JavaScript Code Art into Your Site
色が変化し、ランダムに波打つ曲線のモーショングラフィックスをJSを使って、サイトをダイナミックに演出する方法
まずは perlin.js をダウンロードして、任意の場所に置きます。
以下のJSを<body></body>内に記述します。
２行目の script src=”この部分”を perlin.js を置いたディレクトリに書き換えます。
<canvas></canvas>
<script src="ファイルのパスに書き換え/perlin.js"></script>
<script>
let stageW = 0; // 画面の幅
let stageH = 0; // 画面の高さ
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
noise.seed(Math.random());
resize();
tick();
window.addEventListener('resize', resize);
function tick() {
requestAnimationFrame(tick);
const time = Date.now() / 4000;
draw(time);
}
function draw(time) {
context.clearRect(0, 0, stageW, stageH);
context.lineWidth = 1;
const amplitude = stageH / 2; // 振幅（縦幅)の大きさ
const lineNum = 150; // ラインの数
const segmentNum = 150; // 分割数
[...Array(lineNum).keys()].forEach(j => {
const coefficient = 50 + j;
context.beginPath();
const h = Math.round(j / lineNum * 360); // 色相
const s = 100; // 彩度
const l = Math.round(j / lineNum * 100); // 明度
context.strokeStyle = `hsl(${h}, ${s}%, ${l}%)`;
[...Array(segmentNum).keys()].forEach(i => {
const x = i / (segmentNum - 1) * stageW;
const px = i / coefficient;
const py = (j / 50 + time);
const y = amplitude * noise.perlin2(px, py) + stageH / 2;
if (i === 0) {
context.moveTo(x, y);
} else {
context.lineTo(x, y);
}
});
context.stroke();
});
}
function resize() {
stageW = innerWidth * devicePixelRatio;
stageH = innerHeight * devicePixelRatio;
canvas.width = stageW;
canvas.height = stageH;
}
</script>キャンバス（グラフィックが表示される枠）はお好みでスタイルを調節しましょう。このページでは、以下のように幅画面いっぱい、縦も画面いっぱいに設定しています。
文字をグラフィックの上に乗せたい場合は、文字を<div></div>で囲み、スタイルを position: absolute を使って位置を調節しましょう。
<style>
canvas {
width: 100vw;
height: 100vh;
background: black;
}
</style>Refer
参考サイト
Set the Dark Mode Switch Button on the Web Page by JS
Leave a Comment