이펙트 응용편 - 마우스 이펙트 오번째

마우스 이펙트5

transform 을 이용하여 마우스의 위치에따라 이미지의 각도가 바뀝니다.

JS 설명

window.innerWidth / 2 - mousePageX; 를 이용하여 화면전체의 기준점을 가운데로 변경합니다.
softPageX += (anglePageX - softPageX) * 0.4; 으로 마우스를 부드럽게 만들고,
imgMove.style.transform을 이용하여 rotate 에 마우스의 위치값을 넣어줍니다.

코드 보기

let mousePageX = e.pageX;
let mousePageY = e.pageY;

//마우스 좌표 기준점을 가운데로 변경
let centerPageX = window.innerWidth / 2 - mousePageX;
let centerPageY = window.innerHeight / 2 - mousePageY;

//최소값은 -100 최대값은 100 설정
let maxPageX = Math.max(-500, Math.min(500, centerPageX));
let maxPageY = Math.max(-500, Math.min(500, centerPageY));

//각도 줄이는 설정
let anglePageX = maxPageX * 0.1;
let anglePageY = maxPageY * 0.1;

//부드럽게 설정
let softPageX = 0,
    softPageY = 0;

softPageX += (anglePageX - softPageX) * 0.4;
softPageY += (anglePageY - softPageY) * 0.4;
//이미지 움직이기
const imgMove = document.querySelector(".mouse__img");
imgMove.style.transform = `perspective(600px) rotateX(${softPageY}deg) rotateY(${-softPageX}deg)`;

원본 소스 보기 원본 사이트 보기