Mouse Effect 06 - 텍스트 효과

function 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(".cursor", {duration: 0.3, left: e.pageX, top: e.pageY});
        }
        document.addEventListener("mousemove", mousemove);

이번 효과는 CSS적인 부분에서 처리해야 될 게 많다.

같은 문장을 2번 적고

왼쪽(노란색 글씨)과 오른쪽(흰글씨) 영역으로 나누어서

overflow : hidden 으로 절반씩만 나오게하여 마치 가운데를 기준으로 색이 칠해진 것 처럼 표현하는 방법이다.

 

그 뒤로 스크립트 부분은 간단하다.

자세한건 코드를 참고.

 

 

 

전체 사이트 보기