마우스 이펙트 - 이미지 오버 효과
<div class="cursor">
</div>
<div class="mouse__wrap">
<div class="mouse__text">
<p>Everything comes to him who hustles while he waits.</p>
</div>
<div>
<a href="#" class="mouse__img">
<div class="img">
<img src="img/vimg01.jpg" alt="">
</div>
<span class="txt">성공은 </span>
</a>
<a href="#" class="mouse__img">
<div class="img">
<img src="img/vimg02.jpg" alt="">
</div>
<span class="txt"> 열심히 </span>
</a>
<a href="#" class="mouse__img">
<div class="img">
<img src="img/vimg03.jpg" alt="">
</div>
<span class="txt"> 노력하며 </span>
</a>
<a href="#" class="mouse__img">
<div class="img">
<img src="img/vimg04.jpg" alt="">
</div>
<span class="txt"> 기다리는 </span>
</a>
<a href="#" class="mouse__img">
<div class="img">
<img src="img/vimg05.jpg" alt="">
</div>
<span class="txt"> 사람에게 </span>
</a>
<a href="#" class="mouse__img">
<div class="img">
<img src="img/vimg06.jpg" alt="">
</div>
<span class="txt"> 찾아온다. </span>
</a>
</div>
</div>.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%;
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 .img img {
/* display: none; */
}
.mouse__img .txt {
font-size: 3vw;
}const mouseImg = document.querySelectorAll(".mouse__img");
mouseImg.forEach((item) => {
const imageWrap = item.querySelector(".img");
const imageWrapBounds = imageWrap.getBoundingClientRect();
let itemBounds = item.getBoundingClientRect();
console.log(imageWrapBounds);
// console.log(itemBounds);
const onMouseEnter = ()=>{
gsap.set(imageWrap, {xPercent: -50, yPercent: 50, rotation: -15, scale: 0.3});
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("mousemove", onMouseMove);
item.addEventListener("mouseenter", onMouseEnter);
item.addEventListener("mouseleave", onMouseLeave);
});