Mouse Effect (2) 썸네일형 리스트형 Mouse Effect04 - 이미지 효과 Mouse Effect 중 이미지 효과 입니다. 커서를 따라 이미지가 움직입니다 ㅎㅎ 커서 좌표값을 알아서 /2를 하면 정 가운데로 오네요! 커서는 이미지 안에서만 움직이게 했습니다 const circle = document.querySelector(".cursor").getBoundingClientRect(); //bottom height left right top width x y document.querySelector(".mouse__img").addEventListener("mousemove", (e) => { //커서 gsap.to(".cursor", {duration: .2, left: e.pageX -circle.width/2, top:e.pageY -circle.height/2 }); /.. Mouse Effect03 - 조명 효과 마우스 효과 3번째 조명 효과입니다! 다른 효과들 보다 뭔가 집중이 잘 되는 효과인거같아요 진짜 조명으로 비추고 있는 느낌이 들죠?? //요소값 알기 // const circle1 = document.querySelector(".cursor").clientWidth; //190 : border 빠진 상태 // const circle2 = document.querySelector(".cursor").offsetWidth; //200 : border 포함 상태 const circle = document.querySelector(".cursor").getBoundingClientRect(); //bottom height left right top width x y function follow(e){ gsap... 이전 1 다음
