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

마우스 이펙트6

이번 이펙트는 마우스가 움직일때 글씨가 움직입니다.

JS 설명

gsap를 이용한 애니메이션을 구성하였으며 positionSlow, positionFast는 현재 마우스 커서의 위치값 - 브라우저의 위치값 으로 구했습니다.

코드 보기

 const mouseMove = (e) => {
    let positionSlow = (e.pageX - window.innerWidth / 2) * 0.1;
    let positionFast = (e.pageX - window.innerWidth / 2) * 0.2;
    gsap.to(".spanSlow", { duration: 0.4, x: positionSlow });
    gsap.to(".spanFast", { duration: 0.4, x: -positionFast });
    gsap.to(".mouse__cursor", { duration: 0.3, left: e.pageX - 5, top: e.pageY - 5 });
};
const ani = (text) => {
    text.addEventListener("mouseenter", () => {
        gsap.to(".mouse__cursor", { duration: 0.6, scale: 5, mixBlendMode: "difference" });
    });
    text.addEventListener("mouseleave", () => {
        gsap.to(".mouse__cursor", { duration: 0.6, scale: 1, mixBlendMode: "normal" });
    });
};
text.forEach((text) => {
    ani(text);
});
text2.forEach((text) => {
    ani(text);
});

CSS 설명

코드 보기

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