마우스를 따라다니는 이미지-02

보이는 gif 처럼 마우스가 먼저 이동하고 이미지가 부드럽게 따라오는 기능을 만들어보자.

마우스를 따라다니는 이미지 01에서 만들었던 js 에서 변형을 해보자.

window.onload = () => {
      const h1 = document.querySelector("h1");
      const box = document.querySelector('.box');

      window.addEventListener("mousemove", (e) => {
        h1.innerText = `x : ${e.pageX} y:${e.pageY}`;
        box.style.top = e.pageY + 'px';
        box.style.left = e.pageX + 'px';
      });
    };

부드럽게 업그레이드

window.onload = () => {
      const h1 = document.querySelector("h1");
      const box = document.querySelector('.box');
  
      let x = 0;
      let y = 0;
      let targetX = 0;
      let targetY = 0;
  	  let speed = 0.01;

      window.addEventListener("mousemove", (e) => {
        
        x = e.pageX;
        y = e.pageY;
        
        h1.innerText = `x : ${e.pageX} y:${e.pageY}`;
      });
  
  // 부드럽게 따라다니기
      const loop = () =>{
        
        targetX += (x - targetX) * speed;
        targetY += (y - targetY) * speed;
        
        box.style.top = targetY + 'px';
        box.style.left = targetX + 'px';

        window.requestAnimationFrame(loop);
      };
      loop();
    };

1. 변수를 정의해준다.
   let x = 0;
   let y = 0;
   let targetX = 0;
   let targetY = 0;

2. requestAnimationFrame함수를 이용한다.

3. box.style.top = targetY + 'px';
   box.style.left = targetX + 'px';
   는 loop 함수 안으로 이동시켜준다.

4. targetX += (x - targetX) speed;
   targetY += (y - targetY) speed;

   부드럽게 이동시켜주기위한 계산식 (암기)

   let speed = 0.01; 는 이미지가 따라오는 속도