마우스 이펙트_05 : 원근감을 이용해 좌표값에 따라 3d 효과 주기!

마우스 이펙트 만들기!

JS의 금붕어의 눈처럼 마우스가 움직였을때 명언이 튀어나올듯한 효과를 구현해볼게요!

---

HTML 코드 : 뼈대

마우스 이펙트의 핵심은 cursor를 구성하는것이에요!
꼭 간단한 div를 통한 Cursor를 구성하도록 합시다!

<section id="mouseType">
  <div class="mouse__cursor"></div>
  <div class="mouse__wrap">
      <div class="mouse__img">
          <figure>
              <img src="../../../assets/slider/effect_bg_07.jpg" alt="">
          </figure>
          <figcaption>
              <p>If you feel <span>refreshed</span> when you <span>wake up</span>, yes, you are
                  <span>late.!</span></p>
              <p>잠에서 깨어났을때 <span>개운함</span>을 느꼈다면 예, <span>지각</span>입니다.</p>
          </figcaption>
      </div>
  </div>
</section>

---

CSS 코드 : 살

마우스가 이미지에 닿으면 반전이 되게끔 "mouse__cursor" 클래스에 "mix-blend-mode: difference;"를 설정해줍시다!

이후에는 여러분의 쉽게 늘어가는 여러분의 몸무게처럼
간단하게 html에도 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.1s;
}

.mouse__wrap figure {
  width: 40vw;
  position: relative;
}

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

.mouse__wrap figcaption {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 1vw;
  line-height: 1.4;
  transform: translate3d(-50%, -50%, 100px);
  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: #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;
}

---

JS 코드 : 좌표 값을 통한 원근감 효과 및 커서 구성하기

저는 최대한 간단하게 설명만 가능하므로 비교적 전문적인 용어는 배제한 형태로 설명해볼게요!

1. 좌표에 대한 설명은 각각 구간별로 무엇을 구하는 스크립트인지 적어두었습니다
2. imgMove(".mouse__img")의 원근감을 주기위해 perspective를 600px로 설정해두고
3. rotateX/Y의 값을 anglePageX/Y의 변화된 값을 대입해 x/y축을 마우스 위치에 따라 회전시키고
4. perspective를 통해 주었던 원근감 효과에 의해 desc(설명) 부분에 3d로 보이는듯한 느낌을 줍니다.

const mouseMove = (e) => {

  //마우스 좌표값
  let mousePageX = e.pageX;
  let mousePageY = e.pageY;

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


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

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


  //부드럽게 설정
  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(" + anglePageY + "deg) rotateY(" + -anglePageX +
      "deg)"

  //커서
  gsap.to(".mouse__cursor", {
      duration: .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);

---

완성!

마우스를 움직일때마다 꼭 튀어나와 보이는게 신기하죠?
하지만 수업할때 스크립트를 보는 여러분의 눈 만큼 튀어나오진 못했을겁니다...

---

원본 소스 보기

원본 페이지 보기