54 lines
2.1 KiB
JavaScript
54 lines
2.1 KiB
JavaScript
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 = "";
|
|
});
|
|
});
|