마우스 이벤트

window에 addEventListener("mousemove", func, false)로 콜백 함수 전달

clientX: x좌표 값
clientY: y좌표값

루프 이벤트

window에 requestAnimationFrame() 함수 걸면 자동으로 계속해서 루프를 돈다
모션을 주는 컨텐츠 작업 시 많이 사용함

이미지 움직이는 속도 제어

• 변수 선언
  let x = 0, y = 0;
  let mx = 0, my = 0, speed = 0.1;

• 마우스 움직이는 좌표 - 윈도우 화면 값의 절반 >> 이미지 중앙 위치
  x = (e.clientX - window.innerWidth / 2);
  y = (e.clientY - window.innerHeight / 2);

• 마우스 따라 움직이는 속도 제어
  mx += (x - mx) speed;
  my += (y - my) speed;

이미지 움직이는 방향 제어

• 화면 중앙으로 부터 움직일 폭 설정
  puppy.style.transform = translate(${-mx / 10 - 183}px, ${-my / 20 + 220}px);
  back.style.transform = translate(${mx/30}px, ${my/50}px);

• 화면 중앙 좌표 (0,0)으로 부터 상하좌우 값이 '-', '+'로 변함.
  - 이미지 좌표 값이 '-'이면 마우스 반대로 움직이고
  - 이미지 좌표 값이 '+'이면 마우스랑 같은 방향으로 움직임.

• mx/3 >>> 화면 길이를 나워서 이미지가 움직일 폭 제한