마우스 이펙트 - 이미지 오버 효과
<main>
<section id="mouseType01">
<div class="mouse__wrap">
<div class="mouse__text">
<p>He who has never hoped can never despair.</p>
</div>
<div>
<a href="#" class="mouse__img">
<div class="img">
<img src="img/vimages01.jpg" alt="vimages01">
</div>
<span class="txt">희망을 </span>
</a>
<a href="#" class="mouse__img">
<div class="img">
<img src="img/vimages02.jpg" alt="vimages02">
</div>
<span class="txt">품지</span>
</a>
<a href="#" class="mouse__img">
<div class="img">
<img src="img/vimages03.jpg" alt="vimages03">
</div>
<span class="txt">않는 </span>
</a>
<a href="#" class="mouse__img">
<div class="img">
<img src="img/vimages04.jpg" alt="vimages04">
</div>
<span class="txt">자는 </span>
</a>
<a href="#" class="mouse__img">
<div class="img">
<img src="img/vimages05.jpg" alt="vimages05">
</div>
<span class="txt">절망도 </span>
</a>
<a href="#" class="mouse__img">
<div class="img">
<img src="img/vimages06.jpg" alt="vimages06">
</div>
<span class="txt">할 수 </span>
</a>
<a href="#" class="mouse__img">
<div class="img">
<img src="img/vimages07.jpg" alt="vimages07">
</div>
<span class="txt">없다.</span>
</a>
</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__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;
z-index: 99999;
}
.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;
}
</style>
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);
})