S
Look at this at the beginning of your code. With querySelector() You're selecting only the first one you find. Can you see they're just taking the first one on the page?//Movement
const card = document.querySelector(".card")
const main = document.querySelector(".main")
//Items
const sneaker = document.querySelector(".sneaker img")
const title = document.querySelector(".title")
const purchase = document.querySelector(".purchase")
const info = document.querySelector(".info")
Then the event is assigned very correctly to each of the .container, they shoot at the right event but they do animation on the items you selected wrong.Instead, you should select the first child which finds for each of the divs you are assigning to events:It would be like this (it was the only thing I corrected, there is more that I am tempted to modify, but you are already going to find topics to ask questions)://For
var divs = document.querySelectorAll('.container');
let y = divs.length;
//Movement Animation
for (let i = 0; i < y; i++) {
/* Corridos para adentro del bucle
VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV */
let //Movement
card = divs[i].querySelector(".card"),
main = divs[i].querySelector(".main"),
//Items
sneaker = divs[i].querySelector(".sneaker img"),
title = divs[i].querySelector(".title"),
purchase = divs[i].querySelector(".purchase"),
info = divs[i].querySelector(".info");
/* AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA */
divs[i].addEventListener("mousemove", (e) => {
let xAxis = (window.innerWidth / 4 - e.pageX) / 50;
let yAxis = (window.innerHeight / 4 - e.pageY) / 50;
card.style.transform = rotateY(${xAxis}deg) rotateX(${yAxis}deg);
})
//Movement in
divs[i].addEventListener("mouseenter", (e) => {
card.style.transition = "none";
//Popout
sneaker.style.transform = "translateZ(100px) rotateZ(-45deg)";
title.style.transform = "translateZ(50px)";
purchase.style.transform = "translateZ(25px)";
info.style.transform = "translateZ(40px)";
})
//Movement Out
divs[i].addEventListener("mouseleave", (e) => {
card.style.transition = "all 0.5s ease";
card.style.transform = rotateY(0deg) rotateX(0deg);
//Popback
title.style.transform = "translateZ(0px)";
sneaker.style.transform = "translateZ(0px)";
purchase.style.transform = "translateZ(0px)";
info.style.transform = "translateZ(0px)";
})
}* {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100vw;
height: 100vh;
}
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 30%;
margin: auto;
}
.container .card {
min-height: 80vh;
width: 70%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
padding: 2rem;
background-color: #fff;
border-radius: 30px;
-webkit-box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.2);
}
.container .card .sneaker {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 5rem 0;
}
.container .card .sneaker .circle {
z-index: 1;
position: absolute;
height: 12rem;
width: 12rem;
background: -webkit-gradient(linear, left top, right top, from(rgba(245, 70, 66, 0.75)), to(rgba(8, 83, 156, 0.75)));
background: linear-gradient(to right, rgba(245, 70, 66, 0.75), rgba(8, 83, 156, 0.75));
border-radius: 50%;
}
.container .card .sneaker img {
z-index: 2;
width: 17rem;
-webkit-transition: all 0.75s ease-out;
transition: all 0.75s ease-out;
}
.container .card .info {
width: 70%;
-webkit-transition: all 0.75s ease-out;
transition: all 0.75s ease-out;
}
.container .card .info .title {
font-size: 2rem;
-webkit-transition: all 0.75s ease-out;
transition: all 0.75s ease-out;
}
.container .card .info .text {
font-size: .7rem;
text-transform: uppercase;
color: #585858;
}
.container .sizes {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 2rem 0;
}
.container .sizes button {
padding: .1rem 1rem;
border: none;
background-color: transparent;
-webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
border-radius: 30px;
cursor: pointer;
}
.container .sizes .active {
color: white;
background-color: #585858;
}
.container .purchase {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: all 0.75s ease-out;
transition: all 0.75s ease-out;
}
.container .purchase button {
border: none;
background-color: #f54642;
color: white;
padding: .5rem 5rem;
border-radius: 30px;
-webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
/*# sourceMappingURL=styles.css.map */<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="tenis hover 3D effect">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<title>Adidas</title>
</head>
<body>
<div class="main" id="main">
<div class="container">
<div class="card">
<div class="sneaker">
<div class="circle"></div>
<img src="/adidas.png" alt="">
</div>
<div class="info">
<h1 class="title">Adidas ZX</h1>
<h3 class="text">future-ready trainver with wrapped boost for exception comfort</h3>
</div>
<div class="sizes">
<button>39</button>
<button>40</button>
<button class="active">42</button>
<button>44</button>
</div>
<div class="purchase">
<button>Purchase</button>
</div>
</div>
</div>
<div class="container">
<div class="card">
<div class="sneaker">
<div class="circle"></div>
<img src="/adidas.png" alt="">
</div>
<div class="info">
<h1 class="title">Adidas ZX</h1>
<h3 class="text">future-ready trainver with wrapped boost for exception comfort</h3>
</div>
<div class="sizes">
<button>39</button>
<button>40</button>
<button class="active">42</button>
<button>44</button>
</div>
<div class="purchase">
<button>Purchase</button>
</div>
</div>
</div>
</div>
<script defer src="/script.js"></script>
</body>
</html>
