마우스 이펙트 - 텍스트 효과
<main>
<section id="mouseType01">
<div class="cursor"></div>
<div class="mouse__wrap">
<div class="mouse__img">
<figure>
<img src="img/mouseimg03.jpg" alt="이미지">
</figure>
</div>
<div class="mouse__text">
<div class="line">
<div class="left">
<div class="spanWrap">
<div class="spanSlow">Believe you can and</div>
</div>
</div>
<div class="right">
<div class="spanWrap">
<div class="spanSlow">Believe you can and</div>
</div>
</div>
</div>
<div class="line">
<div class="left">
<div class="spanWrap">
<div class="spanFast">You`re halfway there.</div>
</div>
</div>
<div class="right">
<div class="spanWrap">
<div class="spanFast">You`re halfway there.</div>
</div>
</div>
</div>
<div class="line">
<div class="left">
<div class="spanWrap">
<div class="spanSlow">할 수 있다고 믿으면</div>
</div>
</div>
<div class="right">
<div class="spanWrap">
<div class="spanSlow">할 수 있다고 믿으면</div>
</div>
</div>
</div>
<div class="line">
<div class="left">
<div class="spanWrap">
<div class="spanFast">반은 온 것이다.</div>
</div>
</div>
<div class="right">
<div class="spanWrap">
<div class="spanFast">반은 온 것이다.</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<style>
body::before {
background: rgba(40, 41, 43, 0.3)
}
.mouse__wrap {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #fff;
width: 100%;
height: 100vh;
overflow: hidden;
cursor: none;
}
.mouse__img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: -1;
width: 50%;
}
.mouse__text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -20%);
color: #fff;
font-size: 3vw;
line-height: 1.5;
}
.mouse__text .line {
width: 100%;
display: flex;
}
.mouse__text .line .left {
width: 50vw;
color: sandybrown;
transform: skew(0deg, -15deg);
overflow: hidden;
}
.mouse__text .line .left .spanWrap {
width: 100vw;
text-align: center;
}
.mouse__text .line .right {
width: 50vw;
transform: skew(0deg, 15deg);
overflow: hidden;
}
.mouse__text .line .right .spanWrap {
width: 100vw;
text-align: center;
transform: translateX(-50vw);
}
.cursor {
position: absolute;
left: 0; top: 0;
width: 20px;
height: 20px;
z-index: 99999;
border-radius: 50%;
background: rgba(255, 255, 255, 0.8);
user-select: none;
pointer-events: none;
}
</style>
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);