Mouse Effect - 텍스트 효과

 

설명

마우스의 위치값에 따라서 글씨가 움직입니다.
보여지는 글씨는 한줄이지만 실제로는 두줄씩 있는 상태에서 각도를 조절해준 뒤 overflow: hidden으로 안보이게 처리해 주었습니다.

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)