Add animated menu cards

html/scripts/CardTilter.js

@@ -0,0 +1,48 @@
+export class CardTilter {
+
+    /**
+     *
+     * @param card Card to be moved
+     * @param tilt max tilting angle in degree
+     * @param perspective perspective in pixels
+     */
+    constructor({card : card, tilt : tilt, perspective : perspective}) {
+        this.card = card;
+        this.tilt = tilt;
+        this.perspective = perspective;
+        this.watch()
+    }
+
+    watch(){
+        this.card.addEventListener('mousemove', (e) => {
+            const rotations = this.calculatePositions(e.clientX, e.clientY);
+            this.transform(rotations.x, rotations.y);
+        });
+
+        this.card.addEventListener('mouseleave', () => {
+            this.reset();
+        });
+    }
+
+    calculatePositions(cursorX, cursorY) {
+        const rect = this.card.getBoundingClientRect();
+        const x = cursorX - rect.left;
+        const y = cursorY - rect.top;
+
+        const percentX = (x / rect.width) - 0.5;
+        const percentY = (y / rect.height) - 0.5;
+
+        const rotateX = -percentY * this.tilt;
+        const rotateY = percentX * this.tilt;
+
+        return {x : rotateX, y : rotateY};
+    };
+
+    transform(rotationX, rotationY) {
+        this.card.style.transform = `translateY(-10px) perspective(${this.perspective}px) rotateX(${rotationX}deg) rotateY(${rotationY}deg) scale(1.05)`;
+    }
+
+    reset(){
+        this.card.style.transform = `rotateX(0deg) rotateY(0deg) scale(1)`;
+    }
+}