Search code examples
javascripthtmluser-interfacehoveraddeventlistener

how to make mousemove to work on different element under a grid system?

i want to implement 3d tilting effect on mouse hover with javascript, i have the css grid system and i already got the tilting to work... but currently the effect seems to be only affecting the first div of the grid system.

const card = document.querySelector('.card > div');

card.addEventListener("mousemove", (e) =>{
  rotateElement(e, card);
});

function rotateElement(e, card){
  const x = e.pageX;
  const y = e.pageY;

  const middleX = window.innerWidth / 2;
  const middleY = window.innerHeight / 2;

  const offsetX = ( 1 * ((x - middleX) / middleX) * 15).toFixed(2);
  const offsetY = (-1 * ((y - middleY) / middleY) * 15).toFixed(2);
  console.log(offsetX, offsetY)

  // console.log(x, y)
  card.style.transform = 'perspective(500px) rotateX(' + offsetY + 'deg) rotateY(' + offsetX + 'deg)';
}
body {
  display: flex;
  width: 100%;
  min-height: 100vh;
    align-items: center;
  justify-content: space-evenly;
  background-color: #000;
}
.card {
  display: grid;
  border-radius: 10px;
  width: 400px;
  height: 500px;
  font-size: 1.75rem;
  background-color: #e84393;
    align-items: center;
  justify-content: center;
  gap: 2px;
  transform: perspective(1000px);
}

.card > div{
  position:relative;
  width: 150px;
  height: 150px;
  background-color: rgb(255, 247, 247);
  transform: perspective(500px);
  z-index: 9999;
}
<body>   
   <div class="card">
    <div class="ahaha"></div>
    <div class="ahaha"></div>
    <div class="ahaha"></div>
  </div>
 <script src="tilt.js"></script>
</body>

how to make it affect all of the childs?

(and, btw how to make code snippet thing inside a post? EDIT: apparently you have to post the question and then edit it to have the snippet button. )

Solution 

  • const cards = document.querySelectorAll('.card > div');

cards.forEach(card => {
  card.addEventListener('mousemove', cardMove);
})

function cardMove(e) {
  const box = e.currentTarget;
  const rect = box.getBoundingClientRect();
  const midX = box.offsetWidth/2;
  const midY = box.offsetHeight/2;
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  const rotX = (((x - midX) / midX) * 20). toFixed(2);
  const rotY = ((-1 * (y - midY) / midY) * 20). toFixed(2);

  // console.log(x, y)
   box.style.transform = `perspective(200px) rotateX(${rotY}deg) rotateY(${rotX}deg)`;
}
    body {
  display: flex;
  width: 100%;
  min-height: 100vh;
  align-items: center;
  justify-content: space-evenly;
  background-color: #000;
}

.card {
  display: grid;
  border-radius: 10px;
  width: 400px;
  height: 500px;
  font-size: 1.75rem;
  background-color: #e84393;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transform: perspective(1000px);
}

.card>div {
  position: relative;
  width: 150px;
  height: 150px;
  background-color: rgb(255, 247, 247);
  transform: perspective(500px);
  z-index: 9999;
}
    <body>
  <div class="card">
    <div class="ahaha"></div>
    <div class="ahaha"></div>
    <div class="ahaha"></div>
  </div>
  <script src="tilt.js"></script>
</body>

    as suggested by @FiddlingAway, i am answering to this question as i now already got it working. ^.^