마우스 이펙트 06

                        "i thought you would"
                    
                        "i thought you would"
                    
                        If you know please tell me in advance
                    
                        If you know please tell me in advance
                    
                        "내 너 그럴줄 알았다"
                    
                        "내 너 그럴줄 알았다"
                    
                        알았으면 제발 미리 말을 해줘라
                    
                        알았으면 제발 미리 말을 해줘라

소스 보기

Javascript

HTML

CSS

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 });
};

window.addEventListener("mousemove", mouseMove);

//마우스 커서가 글씨 위에 올라가면 크기는 5배(2번) 정도 크게 작업... 글씨 반전효과(5번) 추가

const text = document.querySelectorAll(".spanSlow");
const text2 = document.querySelectorAll(".spanFast");
text.forEach((e) => {
	e.addEventListener("mouseenter", () => {
		document.querySelector(".mouse__cursor").classList.add("active");
	});
	e.addEventListener("mouseleave", () => {
		document.querySelector(".mouse__cursor").classList.remove("active");
	});
});
text2.forEach((e) => {
	e.addEventListener("mouseenter", () => {
		document.querySelector(".mouse__cursor").classList.add("active");
	});
	e.addEventListener("mouseleave", () => {
		document.querySelector(".mouse__cursor").classList.remove("active");
	});
});

<main id="main">
	<section id="mouseType">
	  <div class="mouse__cursor"></div>
	  <div class="mouse__wrap">
		<div class="mouse__img">
		  <figure>
			<img src="../assets/img/effect_bg11.jpg" alt="이미지">
		  </figure>
		</div>
		<div class="mouse__text">
		  <div class="line">
			  <div class="left">
				  <div class="spanWrap">
					  <span class="spanSlow">"i thought you would"</span>
				  </div>
			  </div>
			  <div class="right">
				  <div class="spanWrap">
					  <span class="spanSlow">"i thought you would"</span>
				  </div>
			  </div>
		  </div>
		  <div class="line">
			  <div class="left">
				  <div class="spanWrap">
					  <span class="spanFast">If you know please tell me in advance</span>
				  </div>
			  </div>
			  <div class="right">
				  <div class="spanWrap">
					  <span class="spanFast">If you know please tell me in advance</span>
				  </div>
			  </div>
		  </div>
		  <div class="line">
			  <div class="left">
				  <div class="spanWrap">
					  <span class="spanSlow">"내 너 그럴줄 알았다"</span>
				  </div>
			  </div>
			  <div class="right">
				  <div class="spanWrap">
					  <span class="spanSlow">"내 너 그럴줄 알았다"</span>
				  </div>
			  </div>
		  </div>
		  <div class="line">
			  <div class="left">
				  <div class="spanWrap">
					  <span class="spanFast">알았으면 제발 미리 말을 해줘라</span>
				  </div>
			  </div>
			  <div class="right">
				  <div class="spanWrap">
					  <span class="spanFast">알았으면 제발 미리 말을 해줘라</span>
				  </div>
			  </div>
		  </div>
	  </div>
	  </div>
	</section>
  
  </main>

/* mouseType */
.mouse__wrap {
	color: #fff;
	width: 100%;
	height: 100vh;
	cursor: none;
}
.mouse__img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}
.mouse__text {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -20%);
	font-size: 3vw;
	line-height: 1.5;
}
.mouse__text .line {
	width: 100%;
	display: flex;
}
.mouse__text .line .left {
	width: 50vw;
	color: orange;
	overflow: hidden;
	transform: skew(0deg, -15deg);
}
.mouse__text .line .left .spanWrap {
	width: 100vw;
	text-align: center;
}
.mouse__text .line .right {
	width: 50vw;
	overflow: hidden;
	transform: skew(0deg, 15deg);
}
.mouse__text .line .right .spanWrap {
	width: 100vw;
	text-align: center;
	transform: translateX(-50vw);
}
.mouse__text span {
	display: inline-block;
}
.mouse__cursor {
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	z-index: 9999;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.9);
	user-select: none;
	pointer-events: none;
	/* 반전효과 */
	mix-blend-mode: difference;
	transition: transform 0.3s;
}
.mouse__cursor.active {
	transform: scale(5);
}