57 lines
1.8 KiB
JavaScript
57 lines
1.8 KiB
JavaScript
const MIN_SPEED = 1.5;
|
|
const MAX_SPEED = 2.5;
|
|
function randomNumber(min, max) {
|
|
return Math.random() * (max - min) + min;
|
|
}
|
|
class Blob {
|
|
constructor(el) {
|
|
this.el = el;
|
|
const boundingRect = this.el.getBoundingClientRect();
|
|
this.size = boundingRect.width;
|
|
this.initialX = randomNumber(0, window.innerWidth - this.size);
|
|
this.initialY = randomNumber(0, window.innerHeight - this.size);
|
|
this.el.style.top = `${this.initialY}px`;
|
|
this.el.style.left = `${this.initialX}px`;
|
|
this.vx = randomNumber(MIN_SPEED, MAX_SPEED) * (Math.random() > 0.5 ? 1 : -1);
|
|
this.vy = randomNumber(MIN_SPEED, MAX_SPEED) * (Math.random() > 0.5 ? 1 : -1);
|
|
this.x = this.initialX;
|
|
this.y = this.initialY;
|
|
}
|
|
update() {
|
|
this.x += this.vx;
|
|
this.y += this.vy;
|
|
if (this.x >= window.innerWidth - this.size) {
|
|
this.x = window.innerWidth - this.size;
|
|
this.vx *= -1;
|
|
}
|
|
if (this.y >= window.innerHeight - this.size) {
|
|
this.y = window.innerHeight - this.size;
|
|
this.vy *= -1;
|
|
}
|
|
if (this.x <= 0) {
|
|
this.x = 0;
|
|
this.vx *= -1;
|
|
}
|
|
if (this.y <= 0) {
|
|
this.y = 0;
|
|
this.vy *= -1;
|
|
}
|
|
}
|
|
move() {
|
|
this.el.style.transform = `translate(${this.x - this.initialX}px, ${this.y - this.initialY}px)`;
|
|
}
|
|
}
|
|
function initBlobs() {
|
|
const blobEls = document.querySelectorAll('.bouncing-blob');
|
|
const blobs = Array.from(blobEls).map((blobEl) => new Blob(blobEl));
|
|
function update() {
|
|
requestAnimationFrame(update);
|
|
blobs.forEach((blob) => {
|
|
blob.update();
|
|
blob.move();
|
|
});
|
|
}
|
|
requestAnimationFrame(update);
|
|
}
|
|
initBlobs();
|