마우스 이펙트 - 텍스트 효과
<main>
<section id="mouseType03">
<div class="cursor">
</div>
<div class="mouse__wrap">
<div class="mouse__img">
<figure>
<img src="img/image20.jpg" alt="이미지">
</figure>
</div>
<div class="mouse__text">
<div class="line">
<div class="left">
<div class="span__wrap">
<div class="spanSlow">Life is either a great</div>
</div>
</div>
<div class="right">
<div class="span__wrap">
<div class="spanSlow">Life is either a great</div>
</div>
</div>
</div>
<div class="line">
<div class="left">
<div class="span__wrap">
<div class="spanFast">adventure or nothing</div>
</div>
</div>
<div class="right">
<div class="span__wrap">
<div class="spanFast">adventure or nothing</div>
</div>
</div>
</div>
<div class="line">
<div class="left">
<div class="span__wrap">
<div class="spanSlow">인생은 위대한 모험이거나</div>
</div>
</div>
<div class="right">
<div class="span__wrap">
<div class="spanSlow">인생은 위대한 모험이거나</div>
</div>
</div>
</div>
<div class="line">
<div class="left">
<div class="span__wrap">
<div class="spanFast">아니면 아무것도 아니다.</div>
</div>
</div>
<div class="right">
<div class="span__wrap">
<div class="spanFast">아니면 아무것도 아니다.</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
body::before {
background: rgba(28, 29, 31, 0.794)
}
#mouseType01 {}
.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: orange;
transform: skew(0deg, -15deg);
overflow: hidden;
}
.mouse__text .line .left .span__wrap {
width: 100vw;
text-align: center;
}
.mouse__text .line .right {
width: 50vw;
overflow: hidden;
transform: skew(0deg, 15deg);
}
.mouse__text .line .right .span__wrap {
width: 100vw;
text-align: center;
transform: translateX(-50vw);
}
.cursor {
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
z-index: 9999;
border-radius: 50%;
background: rgba(255,255,255,0.8);
user-select: none;
pointer-events: none;
}
function mousemove(e){
let positionSlow = (e.pageX - (window.innerWidth/2)) * 0.1;
let positionsFast = (e.pageX - (window.innerWidth/2)) * 0.2;
gsap.to(".spanSlow", {duration: 0.4, x: positionSlow});
gsap.to(".spanFast", {duration: 0.4, x: -positionsFast});
gsap.to(".cursor", {duration:0.3, left: e.pageX, top: e.pageY});
}
document.addEventListener("mousemove", mousemove);