commit f38f4ac5cf5981a7375018be775ac4f093d46c84 Author: Fabienmcl Date: Fri Apr 26 16:10:21 2024 +0200 initial commit diff --git a/JS/script.js b/JS/script.js new file mode 100644 index 0000000..11997d2 --- /dev/null +++ b/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 = ""; + }); +}); diff --git a/Pages/Card Football.html b/Pages/Card Football.html new file mode 100644 index 0000000..17c42c1 --- /dev/null +++ b/Pages/Card Football.html @@ -0,0 +1,22 @@ + + + + + + + Card Effect Football + + + +
+
+
+
+
+
+ +
+ + + + \ No newline at end of file diff --git a/Pages/Card Pokemon.html b/Pages/Card Pokemon.html new file mode 100644 index 0000000..57f91ac --- /dev/null +++ b/Pages/Card Pokemon.html @@ -0,0 +1,24 @@ + + + + + + + + + Card Effect Pokémon + + + +
+
+
+
+
+
+ +
+ + + + \ No newline at end of file diff --git a/css/Card Pokemon.css b/css/Card Pokemon.css new file mode 100644 index 0000000..1368823 --- /dev/null +++ b/css/Card Pokemon.css @@ -0,0 +1,44 @@ +*, +::before +::after{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + background-image: url("../img/background_pokemon.jpg"); + background-color: red; + height: 100vh; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; +} + +.card{ + width: 350px; + height: 500px; + perspective: 1000px; + +} + +.content-card{ + width: 100%; + height: 100%; + overflow: hidden; + border-radius: 25px; + transition: all 0.25s ease-out; +} + +.glow{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + transition: all 0.25s ease-out; + border-radius: 25px; + mix-blend-mode: hard-light; + background: radial-gradient(circle at 50% 0%, rgba(31, 34, 37, 0.014), transparent ); +} \ No newline at end of file diff --git a/css/Card football.css b/css/Card football.css new file mode 100644 index 0000000..baaeb22 --- /dev/null +++ b/css/Card football.css @@ -0,0 +1,44 @@ +*, +::before +::after{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + background-image: url('../img/background.jpg'); + + height: 100vh; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; +} + +.card{ + width: 350px; + height: 500px; + perspective: 1000px; + +} + +.content-card{ + width: 100%; + height: 100%; + overflow: hidden; + border-radius: 25px; + transition: all 0.25s ease-out; +} + +.glow{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + transition: all 0.25s ease-out; + border-radius: 25px; + mix-blend-mode: hard-light; + background: radial-gradient(circle at 50% 0%, rgba(31, 34, 37, 0.014), transparent ); +} \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..ee7544e --- /dev/null +++ b/css/style.css @@ -0,0 +1,44 @@ +*, +::before +::after{ + margin: 0; + padding: 0; +} + +.container { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + text-align: center; + } + + .card { + width: 300px; + border: 1px solid #ccc; + padding: 10px; + border-radius: 5px; + margin: 10px; + } + + .image{ + height: 250px; + width: 200px; + } + + .img{ + height: 269px; + width: 219px; + } + + + .button { + display: inline-block; + background-color: #007bff; + color: #fff; + padding: 10px 20px; + text-decoration: none; + border-radius: 4px; + margin-top: 12px; + } + \ No newline at end of file diff --git a/img/Carte.png b/img/Carte.png new file mode 100644 index 0000000..2ce63e7 Binary files /dev/null and b/img/Carte.png differ diff --git a/img/Palkia.ico b/img/Palkia.ico new file mode 100644 index 0000000..b91409d Binary files /dev/null and b/img/Palkia.ico differ diff --git a/img/Perrin.png b/img/Perrin.png new file mode 100644 index 0000000..2c6f336 Binary files /dev/null and b/img/Perrin.png differ diff --git a/img/background.jpg b/img/background.jpg new file mode 100644 index 0000000..7d46f76 Binary files /dev/null and b/img/background.jpg differ diff --git a/img/background_pokemon.jpg b/img/background_pokemon.jpg new file mode 100644 index 0000000..f107367 Binary files /dev/null and b/img/background_pokemon.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..3156f4f --- /dev/null +++ b/index.html @@ -0,0 +1,32 @@ + + + + + + + Card Effect + + + +
+
+

Card 1

+

Card with 3D effect of the footballer Loic Perrin

+ + Voir plus +
+ +
+

Card 2

+

card with 3D effect of pokemon Palkia

+ + Voir plus +
+
+ + + + + + + \ No newline at end of file