Mouse Effect 05

Mouse Effect 05

마우스를 움직일 때 가운데에 있는 사진과 글귀가 3D 처럼 움직이는 이펙트를 공부해보았습니다.

01. HTML

사진을 넣을 figure 와 글귀를 감쌀 figcaption을 mouse img 로 감싸 줍니다.

🦢 HTML 코드

<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>

   
<div class="mouse__info">
  <ul>
    <li>mousePageX : <span class="mousePageX">0</span> px </li>
    <li>mousePageY : <span class="mousePageY">0</span> px </li>
    <li>centerPageX : <span class="centerPageX">0</span> px </li>
    <li>centerPageY : <span class="centerPageY">0</span> px </li>
    <li>maxPageX : <span class="maxPageX">0</span> px </li>
    <li>maxPageY : <span class="maxPageY">0</span> px </li>
    <li>anglePageX : <span class="anglePageX">0</span> px </li>
    <li>anglePageY : <span class="anglePageY">0</span> px </li>
  </ul>
</div>

02. Css

이미지를 고정해주고 애니메이션을 지정해 움직임에 부드러움을 주었습니다.

🦢 css 코드

 .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;
}

03. Javascript

이미지는 최대값 최소값으로 100 과 -100으로 만들고 그 안에서 0.3 등을 곱하여 움직이는 각도가 줄어들고 부드럽게 움직일 수 있도록 만들어줍니다.

🦢 Javascript 코드

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);

04. 이미지로 한눈에 알아봅시다.

원본 소스 보여주기

원본 사이트 보여주기