1

Holaaaa, tengo un proyecto donde estoy ocupando una animación en JavaScript donde si pasas el mouse sobre un div, este se mueve en relación a la posición del mouse, y este efecto lo quiero aplicar a varios div con la misma clase, ¿como puedo hacerlo?

Ya intenté haciendo un contenedor padre donde están mis dos div y obteniéndolos como hijos, pero al tener la misma clase, cuando hago hover sobre un div se ve afectado el otro

Entonces necesito saber como darle "individualidad" a cada div a pesar de que tengan la misma clase, porque la animación que quiero implementar tiene que afectar a varios elementos a la vez

O pueden darme alguna recomendación o algún cambio

//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")

//For
var divs = document.querySelectorAll('.container')
let y = divs.length

//Movement Animation
for (let i = 0; i < y; i++) {
  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>

2 respuestas 2

1

Mirá esto al inicio de tu código. Con querySelector() estás seleccionando únicamente al primero que encuentra. ¿se ve que únicamente van a tomar al primero de la página?

//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")

Luego el evento se lo estás asignando muy correctamente a cada uno de los .container, que se disparan en el evento correcto pero hacen la animación sobre los elementos que seleccionaste mal.

En cambio, deberías seleccionar el primer hijo que encuentra para cada uno de los divs a los que les estás asignando eventos:



Quedaría así (fue lo único que corregí, hay más que estoy tentado de modificar, pero ya vas a ir encontrando temas para hacer preguntas):

//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>

1

Tu problema se solucionaría accediendo al elemento mediante la propiedad currentTarget del evento. Según la documentación de mozilla, textualmente:

Es interesante utilizar event.currentTarget cuando se asocia un mismo controlador de eventos a varios elementos.

Vamos con un ejemplo sencillo:

// Obtiene todos los elementos con la clase test.
let items = document.querySelectorAll('.test');

// Recorre los elementos para asignar el evento 'mouseenter'.
items.forEach((item) => {

  item.addEventListener('mouseenter', (event) => {
  
    // Una vez ejecutado el evento, mediante la propiedad 'currentTarget' de 'event', accedemos al innerText del elemento.
    document.getElementById('txt').innerText = event.currentTarget.innerText;
  
  });

});
.test {
  width:60px;
  height:60px;
  border:solid 1px #000;
}
<html>
<head></head>
<body>

  <div class='test'>Div 1</div>
  <div class='test'>Div 2</div>
  
  <br />
  
  <div id='txt'>
  </div>

</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.