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

마우스 이펙트3

이번 마우스이펙트는 마우스가 움직일때 원본 이미지가 보인는것입니다. background-attachment: fixed; 로 고정을 시킨후 e.pageX - circle.width / 2, 으로 동그란 원이 가운데로 가게했습니다.

JS 설명

gsap를 써서 마우스커서가 움직이게 작동했습니다.

코드 보기

window.addEventListener("mousemove", (e) => {
    gsap.to(cursor, {
        duration: 0.6,
        left: e.pageX - circle.width / 2,
        top: e.pageY - circle.height / 2,
    });
});

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