마우스 이펙트 - 텍스트 효과
<section id="mouseType06">
<div class="cursor"></div>
<div class="mouse__wrap">
<div class="mouse__img">
<figure>
<img src="img/lucky.jpg" alt="이미지">
</figure>
</div>
<div class="mouse__text">
<div class="line">
<div class="left">
<div class="spanWrap">
<div class="spanSlow">I find the harder i work,</div>
</div>
</div>
<div class="right">
<div class="spanWrap">
<div class="spanSlow">I find the harder i work,</div>
</div>
</div>
</div>
<div class="line">
<div class="left">
<div class="spanWrap">
<div class="spanFast">the more luck i have.</div>
</div>
</div>
<div class="right">
<div class="spanWrap">
<div class="spanFast">the more luck i have.</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>
body::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.8);
z-index: -1;
}
.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;
left: 1.5;
}
.mouse__text .line {
width: 100%;
display: flex;
}
.mouse__text .line .left {
width: 50vw;
color: rgb(72, 247, 80);
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: 9999;
border-radius: 50%;
background-color: rgba(255,255,255,0.8);
user-select: none;
pointer-events: none;
}<script>
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)
</script>