마우스 이펙트 - 텍스트 효과
<main>
<section id="mouseType06">
<div class="cursor"></div>
<div class="mouse__wrap">
<div class="mouse__img">
<figure>
<img src="img/img19.jpg" alt="이미지">
</figure>
</div>
<div class="mouse__text">
<div class="line">
<div class="left">
<div class="spanWrap">
<div class="spanSlow">Pain Past</div>
</div>
</div>
<div class="right">
<div class="spanWrap">
<div class="spanSlow">Pain Past</div>
</div>
</div>
</div>
<div class="line">
<div class="left">
<div class="spanWrap">
<div class="spanFast">is pleasure.</div>
</div>
</div>
<div class="right">
<div class="spanWrap">
<div class="spanFast">is pleasure.</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> body::before {
background: rgb(70, 70, 70, 0.33);
}
.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: 60%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 3vw;
line-height: 1.5;
}
.mouse__text .line {
width: 100%;
display: flex;
}
.mouse__text .line .left {
width: 50vw;
color: purple;
transform: skew(0deg, -15deg);
overflow: hidden;
}
.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);
}
.cursor {
position: absolute;
left: 0;top: 0;
width: 20px;
height: 20px;
z-index: 99999;
border-radius: 50%;
background-color: 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 positionFast = (e.pageX - (window.innerWidth/2)) * 0.2;
gsap.to(".spanSlow", {duration: 0.4, x: positionSlow});
gsap.to(".spanFast", {duration: 0.4, x: -positionSlow});
gsap.to(".cursor", {duration: 0.3, left: e.pageX, top: e.pageY});
}
document.addEventListener("mousemove", mousemove);