initial commit

JS/script.js

@@ -0,0 +1,53 @@
+const cards = document.querySelectorAll(".card");
+
+cards.forEach(el => {
+  // Variable pour suivre si la souris est sur la carte
+  let isHovered = false;
+
+  // Événement lorsque la souris entre dans la carte
+  el.addEventListener("mouseenter", () => {
+    
+    // La souris est sur la carte
+    isHovered = true;
+  });
+
+  // Événement lorsque la souris bouge à l'intérieur de la carte
+  el.addEventListener("mousemove", e => {
+    if (isHovered) {
+
+      // Récupérer les dimensions et la position de la carte
+      let elRect = el.getBoundingClientRect();
+
+      // Calculer la position de la souris relative à la carte
+      let x = e.clientX - elRect.x;
+      let y = e.clientY - elRect.y;
+
+      // Calculer les angles de rotation en fonction de la position de la souris
+      let midCardWidth = elRect.width / 2;
+      let midCardHeight = elRect.height / 2;
+      let angleY = -(x - midCardWidth) / 8;
+      let angleX = (y - midCardHeight) / 8;
+
+      // Calculer les coordonnées du dégradé radial en fonction de la position de la souris
+      let glowX = (x / elRect.width) * 100;
+      let glowY = (y / elRect.height) * 100;
+
+      // Appliquer les transformations CSS à l'élément enfant numéro 0 et 1 de la carte
+      el.children[0].style.transform = `rotateX(${angleX}deg) rotateY(${angleY}deg) scale(1.1)`;
+      el.children[1].style.transform = `rotateX(${angleX}deg) rotateY(${angleY}deg) scale(1.1)`;
+      // Appliquer le dégradé radial au fond d'arrière-plan de l'élément enfant numéro 1 de la carte
+      el.children[1].style.background = `radial-gradient(circle at ${glowX}% ${glowY}%, rgb(184, 196, 211), transparent)`;
+    }
+  });
+
+  // Événement lorsque la souris quitte la carte
+  el.addEventListener("mouseleave", () => {
+    // La souris n'est plus sur la carte
+    isHovered = false;
+    // Réinitialiser les transformations CSS des éléments enfants de la carte
+    el.children[0].style.transform = "rotateX(0) rotateY(0)";
+    el.children[1].style.transform = "rotateX(0) rotateY(0)";
+    // Réinitialiser le fond d'arrière-plan de l'élément enfant numéro 1 de la carte
+    el.children[1].style.background = "";
+  });
+});