마우스 이펙트 - 텍스트 효과
<section id="mouseType07">
<div class="cursor"></div>
<div class="mouse__wrap">
<div class="mouse__text">
<p>Life is either a daring adventure or nothing at all.</p>
</div>
<div>
<a href="#" class="mouse__img">
<div class="img">
<img src="img/mouse06.jpg" alt="">
</div>
<span class="txt">인생은</span>
</a>
<a href="#" class="mouse__img">
<div class="img">
<img src="img/mouse02.jpg" alt="">
</div>
<span class="txt"> 과감한</span>
</a>
<a href="#" class="mouse__img">
<div class="img">
<img src="img/mouse03.jpg" alt="">
</div>
<span class="txt"> 모험</span>
</a>
<a href="#" class="mouse__img">
<div class="img">
<img src="img/mouse04.jpg" alt="">
</div>
<span class="txt"> 이거나</span>
</a>
<a href="#" class="mouse__img">
<div class="img">
<img src="img/mouse05.jpg" alt="">
</div>
<span class="txt"> 아니면</span>
</a>
<a href="#" class="mouse__img">
<div class="img">
<img src="img/mouse01.jpg" alt="">
</div>
<span class="txt"> 아무것도</span>
</a>
<a href="#" class="mouse__img">
<div class="img">
<img src="img/mouse07.jpg" alt="">
</div>
<span class="txt"> 아니다</span>
</a>
</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__text {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
/* height: 100vh; */
overflow: hidden;
}
.mouse__text p {
font-size: 2vw;
margin-bottom: 2vw;
}
.mouse__img {
position: relative;
}
.mouse__img .img {
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 400px;
opacity: 0;
}
.mouse__img .txt {
font-size: 3vw;
}<script>
const mouseImg = document.querySelectorAll(".mouse__img");
mouseImg.forEach((item) => {
const imageWrap = item.querySelector(".img");
const imageWrapBounds = imageWrap.getBoundingClientRect();
let itemBounds = item.getBoundingClientRect();
const onMouseEnter = () => {
gsap.set(imageWrap, {xPercent: -50, yPercent: 50, rotation: -15, scale: 0.3, opacity: 0});;
gsap.to(imageWrap, {xPercent: -50, yPercent: -50, rotation: 0, scale: 1, opacity: 1});
}
const onMouseLeave = () => {
gsap.to(imageWrap, {xPercent: -50, yPercent: -100, rotation: 15, scale: 0.3, opacity: 0})
}
const onMouseMove = ({x, y}) => {
gsap.to(imageWrap, {
duration: 1.25,
x: Math.abs(x -itemBounds.left),
y: Math.abs(y -itemBounds.top)
})
}
item.addEventListener("mouseenter", onMouseEnter);
item.addEventListener("mouseleave", onMouseLeave);
item.addEventListener("mousemove", onMouseMove);
});
</script>