Script Sample/Mouse Effect
Mouse Effect - 조명 효과
오이연우오
2022. 2. 23. 17:45
function follow(e){
// const circle1 = document.querySelector(".cursor").clientWidth; //190 : border값 빠진 상태
// const circle2 = document.querySelector(".cursor").offsetWidth; //200 : border값 포함 상태
const circle3 = document.querySelector(".cursor").getBoundingClientRect(); //bottom, height, left, right, top, width, x(좌표값), y(좌표값)
// console.log(circle1);
// console.log(circle2);
// console.log(circle3);
//div.cursor를 마우스 정 가운데로 위치시킨다.
gsap.to(".cursor", {duration: .3, left: e.pageX - (circle3.width / 2), top: e.pageY - (circle3.height / 2)});
//출력용
document.querySelector(".pageX").innerText = e.pageX;
document.querySelector(".pageY").innerText = e.pageY;
}
window.addEventListener("mousemove", follow); //mousemove이벤트 발생 시 follow함수 실행