Script Sample/MouseEffect
Mouse Effect 04 - 이미지 효과
근혁
2022. 2. 24. 16:19
{
const circle = document.querySelector(".cursor").getBoundingClientRect();
document.querySelector(".mouse__img").addEventListener("mousemove", (e)=>{ //이미지안에서만 마우스 움직이게함
//커서
gsap.to(".cursor", {duration: .2, left: e.pageX - circle.width/2, top:e.pageY - circle.height/2});
//마우스 좌표 값
let mousePageX = e.pageX;
let mousePageY = e.pageY;
//전체가로
//window.innerWidth 1920 //브라우저 크기
//window.outeWidth 1920 //브라우저 크기
//window.screen.width 1920 //화면크기
//window.screen.height 1080 //화면크기
//마우스 좌표 값을 가운데 초기화
//전체 길이/2 - 마우스 x좌표== 0
let centerPageX = window.innerWidth/2 - mousePageX;
let centerPageY = window.innerHeight/2 - mousePageY;
//이미지 움직이기
// const imgMove = document.querySelector(".mouse__img figure img")
// imgMove.style.transform = "translate("+ centerPageX/20 +"px,"+centerPageY/20 +"px)"
gsap.to(".mouse__img figure img", {duration:0.3, x:centerPageX/20, y: centerPageY/20});
//출력
// document.querySelector(".pageX").textContent = centerPageX
// document.querySelector(".pageY").textContent = centerPageY
document.querySelector(".mousePageX").textContent = mousePageX; //화면에 출력
document.querySelector(".mousePageY").textContent = mousePageY;
document.querySelector(".centerPageX").textContent = centerPageX;
document.querySelector(".centerPageY").textContent = centerPageY;
})
}