Mouse Effect - 이미지 효과2

 

설명

마치 이미지의 시선이 마우스 포인터를 향하게 3D효과를 내는 것 입니다.

transform-style: preserve-3d를 이용해 효과를 만들어 보았습니다.

transform-style: preserve-3d란?

transform-style: preserve-3d속성 은 요소의 자식이 3D 공간에 배치되는지 또는 요소 평면에서 병합되는지 여부를 설정합니다.
평면화하면 요소의 자식은 3D 공간에서 자체적으로 존재하지 않습니다.
이 속성은 상속되지 않으므로 요소의 모든 비-리프 하위 항목에 대해 설정해야 합니다.

const circle = document.querySelector(".cursor").getBoundingClientRect();
function mouseMove(e) {
	//마우스 좌표 값
    let mousePageX = e.pageX;
    let mousePageY = e.pageY;

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

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

	//각도 줄이는 설정
    let anlexpageX = maxPageX * 0.12;
    let anlexpageY = maxPageY * 0.12;

	//부드럽게 설정
    let softPageX = 0;
    let softPageY = 0;
    softPageX += (anlexpageX - softPageX) * 0.4;
    softPageY += (anlexpageY - softPageY) * 0.4;

	//이미지 움직이기
    const imgMove = document.querySelector(".mouse__img");
    imgMove.style.transform = "perspective(600px) rotateX(" + softPageY + "deg) rotateY(" + -softPageX + "deg)"

	//원 크기
    let circleWidth = mousePageX - circle.width / 2;
    let circleHeight = mousePageY - circle.height / 2;

	//커서
    gsap.to(".cursor", {
    	duration: 0.3,
        left: circleWidth,
        top: circleHeight
    })

	//출력
    document.querySelector(".mousePageX").textContent = mousePageX;
    document.querySelector(".mousePageY").textContent = mousePageY;
    document.querySelector(".centerPageX").textContent = centerPageX;
    document.querySelector(".centerPageY").textContent = centerPageY;
    document.querySelector(".maxPageX").textContent = maxPageX;
    document.querySelector(".maxPageY").textContent = maxPageY;
}
document.addEventListener("mousemove", mouseMove)