initial

template/assets/js/vendors/bouncing-blob.js

@@ -0,0 +1,56 @@
+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();