feat(landing-page): slower animation (#307)
This commit is contained in:
Ayo Ayco
GitHub
parent
4f745b59b1
commit
591b4eafe6
1 changed files with 78 additions and 78 deletions
|
|
@ -1,97 +1,97 @@
|
||||||
<div id="starfield" class="absolute -z-10 inset-0">
|
<div id="starfield" class="absolute -z-10 inset-0">
|
||||||
<canvas id="starfield-canvas"></canvas>
|
<canvas id="starfield-canvas"></canvas>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const COUNT = 800;
|
const COUNT = 100;
|
||||||
const SPEED = 0.3;
|
const SPEED = 0.07;
|
||||||
|
|
||||||
class Star {
|
class Star {
|
||||||
x: number;
|
x: number;
|
||||||
y: number;
|
y: number;
|
||||||
z: number;
|
z: number;
|
||||||
xPrev: number;
|
xPrev: number;
|
||||||
yPrev: number;
|
yPrev: number;
|
||||||
|
|
||||||
constructor(x = 0, y = 0, z = 0) {
|
constructor(x = 0, y = 0, z = 0) {
|
||||||
this.x = x;
|
this.x = x;
|
||||||
this.y = y;
|
this.y = y;
|
||||||
this.z = z;
|
this.z = z;
|
||||||
this.xPrev = x;
|
this.xPrev = x;
|
||||||
this.yPrev = y;
|
this.yPrev = y;
|
||||||
}
|
}
|
||||||
|
|
||||||
update(width: number, height: number, speed: number) {
|
update(width: number, height: number, speed: number) {
|
||||||
this.xPrev = this.x;
|
this.xPrev = this.x;
|
||||||
this.yPrev = this.y;
|
this.yPrev = this.y;
|
||||||
this.z += speed * 0.0675;
|
this.z += speed * 0.0675;
|
||||||
this.x += this.x * (speed * 0.0225) * this.z;
|
this.x += this.x * (speed * 0.0225) * this.z;
|
||||||
this.y += this.y * (speed * 0.0225) * this.z;
|
this.y += this.y * (speed * 0.0225) * this.z;
|
||||||
if (
|
if (
|
||||||
this.x > width / 2 ||
|
this.x > width / 2 ||
|
||||||
this.x < -width / 2 ||
|
this.x < -width / 2 ||
|
||||||
this.y > height / 2 ||
|
this.y > height / 2 ||
|
||||||
this.y < -height / 2
|
this.y < -height / 2
|
||||||
) {
|
) {
|
||||||
this.x = Math.random() * width - width / 2;
|
this.x = Math.random() * width - width / 2;
|
||||||
this.y = Math.random() * height - height / 2;
|
this.y = Math.random() * height - height / 2;
|
||||||
this.xPrev = this.x;
|
this.xPrev = this.x;
|
||||||
this.yPrev = this.y;
|
this.yPrev = this.y;
|
||||||
this.z = 0;
|
this.z = 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
draw(ctx: CanvasRenderingContext2D) {
|
draw(ctx: CanvasRenderingContext2D) {
|
||||||
ctx.lineWidth = this.z;
|
ctx.lineWidth = this.z;
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.moveTo(this.x, this.y);
|
ctx.moveTo(this.x, this.y);
|
||||||
ctx.lineTo(this.xPrev, this.yPrev);
|
ctx.lineTo(this.xPrev, this.yPrev);
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const stars = Array.from({ length: COUNT }, () => new Star(0, 0, 0));
|
const stars = Array.from({ length: COUNT }, () => new Star(0, 0, 0));
|
||||||
let rafId = 0;
|
let rafId = 0;
|
||||||
|
|
||||||
const canvas: HTMLCanvasElement = document.querySelector("#starfield-canvas");
|
const canvas: HTMLCanvasElement = document.querySelector('#starfield-canvas');
|
||||||
const ctx = canvas.getContext("2d");
|
const ctx = canvas.getContext('2d');
|
||||||
|
|
||||||
const container = document.querySelector("#starfield");
|
const container = document.querySelector('#starfield');
|
||||||
const resizeObserver = new ResizeObserver(setup);
|
const resizeObserver = new ResizeObserver(setup);
|
||||||
resizeObserver.observe(container);
|
resizeObserver.observe(container);
|
||||||
|
|
||||||
function setup() {
|
function setup() {
|
||||||
rafId > 0 && cancelAnimationFrame(rafId);
|
rafId > 0 && cancelAnimationFrame(rafId);
|
||||||
const { clientWidth: width, clientHeight: height } = container;
|
const { clientWidth: width, clientHeight: height } = container;
|
||||||
|
|
||||||
const dpr = window.devicePixelRatio || 1;
|
const dpr = window.devicePixelRatio || 1;
|
||||||
canvas.width = width * dpr;
|
canvas.width = width * dpr;
|
||||||
canvas.height = height * dpr;
|
canvas.height = height * dpr;
|
||||||
canvas.style.width = `${width}px`;
|
canvas.style.width = `${width}px`;
|
||||||
canvas.style.height = `${height}px`;
|
canvas.style.height = `${height}px`;
|
||||||
ctx.scale(dpr, dpr);
|
ctx.scale(dpr, dpr);
|
||||||
|
|
||||||
for (const star of stars) {
|
for (const star of stars) {
|
||||||
star.x = Math.random() * width - width / 2;
|
star.x = Math.random() * width - width / 2;
|
||||||
star.y = Math.random() * height - height / 2;
|
star.y = Math.random() * height - height / 2;
|
||||||
star.z = 0;
|
star.z = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
ctx.translate(width / 2, height / 2);
|
ctx.translate(width / 2, height / 2);
|
||||||
ctx.fillStyle = "rgba(0, 0, 0, 0.4)";
|
ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
|
||||||
ctx.strokeStyle = "white";
|
ctx.strokeStyle = 'white';
|
||||||
rafId = requestAnimationFrame(frame);
|
rafId = requestAnimationFrame(frame);
|
||||||
}
|
}
|
||||||
|
|
||||||
function frame() {
|
function frame() {
|
||||||
const { clientWidth: width, clientHeight: height } = container;
|
const { clientWidth: width, clientHeight: height } = container;
|
||||||
|
|
||||||
for (const star of stars) {
|
for (const star of stars) {
|
||||||
star.update(width, height, SPEED);
|
star.update(width, height, SPEED);
|
||||||
star.draw(ctx);
|
star.draw(ctx);
|
||||||
}
|
}
|
||||||
|
|
||||||
ctx.fillRect(-width / 2, -height / 2, width, height);
|
ctx.fillRect(-width / 2, -height / 2, width, height);
|
||||||
rafId = requestAnimationFrame(frame);
|
rafId = requestAnimationFrame(frame);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue