마우스 이펙트

We never know the worth of water till the well is dry.

우물이 마르기까지는 물의 가치를 모른다

mousePageX : 0 px
mousePageY : 0 px
centerPageX : 0 px
centerPageY : 0 px
maxPageX : 0 px
maxPageY : 0 px
anglePageX : 0 px
anglePageY : 0 px

소스 보기

Javascript

HTML

CSS

const mouseMove = (e) => {
  //마우스 좌표값
  let mousePageX = e.pageX;
  let mousePageY = e.pageY;

  //마우스 좌표 기준점을 가운데로 변경
  let centerPageX = window.innerWidth/2 - mousePageX;
  let centerPageY = window.innerHeight/2 - mousePageY;

  //최소값은 -100 최대값은 100
  let maxPageX =  Math.max(-100, Math.min(100,centerPageX));
  let maxPageY = Math.max(-100, Math.min(100,centerPageY));


  //각도 줄이는 설정
  let anglePageX = maxPageX * 0.3;
  let anglePageY = maxPageY * 0.3;

  //부드럽게 설정
  let softPageX = 0 , softPageY = 0;
  softPageX += (anglePageX - softPageX) * 0.4;
  softPageY += (anglePageY - softPageY) * 0.4;

  //이미지 움직이기
  const imgMove = document.querySelector(".mouse__img");
  imgMove.style.transform = "perspective(600px) rotateX("+ -softPageY +"deg) rotateY("+ -softPageX +"deg)"

  //커서 
  gsap.to(".mouse__cursor" , {duration : 0.3 , left: mousePageX -50 , top : mousePageY -50 })

  //출력
  document.querySelector(".mousePageX").textContent = mousePageX;
  document.querySelector(".mousePageY").textContent = mousePageY;
  document.querySelector(".centerPageX").textContent = centerPageX;
  document.querySelector(".centerPageY").textContent = centerPageY;
  document.querySelector(".maxPageX").textContent = maxPageX;
  document.querySelector(".maxPageY").textContent = maxPageY;
  document.querySelector(".anglePageX").textContent = Math.round(anglePageX) ;
  document.querySelector(".anglePageY").textContent = Math.round(anglePageY);

};

window.addEventListener("mousemove", mouseMove);

<section id="mouseType">
  <div class="mouse__cursor"></div>
  <div class="mouse__wrap">
    <div class="mouse__img">
      <figure>
        <img src="../../assets/silde/min_jelly/slide_main_08-min.jpg" alt="이미지">
      </figure>
      <figcaption>
        <p>We never know the worth of water till the well is dry.</p>
        <p>우물이 마르기까지는 물의 가치를 모른다</p>
      </figcaption>
    </div>
  </div>
</section>

.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 {
transform: perspective(600px) rotateX(0deg) rotateY(0deg);
transform-style: preserve-3d;
will-change: transform;
transition: all 0.3s;

}
.mouse__wrap figure {
width: 43vw;
}
.mouse__wrap figure::before {
content: '';
position: absolute;
left: 5%;
bottom: -30px;
width: 90%;
background: url(../../assets/silde/min_jelly/slide_bg_08-min.jpg) center no-repeat;
height: 100px;
background-size: 100% 40px;
filter: blur(15px) grayscale(50%);
z-index: -1 ;
opacity: 0.7;
}

.mouse__img figcaption {
position: absolute;
left: 50%;
top: 50%;
font-size: 1vw;
line-height: 1.6;
transform: translate3d(-50%, -50% , 150px);
padding: 1vw;
white-space: nowrap;
text-align: center;
background: rgba(0,0,0,0.4);
}

.mouse__cursor {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #fff;
z-index: 1000;
pointer-events: none;
user-select: none;
mix-blend-mode: difference;
}

.mouse__info {
  position: absolute;
  left: 20px;
  bottom: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: #fff;
  margin-bottom: 10px;
}