"마우스이펙트 02" : 커서 두 개를 통해 다양한 효과 내기

🖱 마우스 이펙트 : 마우스 따라다니기(GSAP)

📌 마우스 cursor 두 개를 통해서 글자나 어느 위치에 마우스를 가져다 놓았을 때, 마우스가 떠났을 때 효과를 넣어 완성해봅시다!

---

마우스 이펙트 완성본⭐️

마우스 이펙트가 궁금하다면?💡 원본 소스보기

➰ HTML

cursor를 두 개로 지정해주었습니다. 마우스 cursor 두 개를 통해 어떤 효과를 표현할 수 있는지 만들기 위해 먼저 html로 밑에와 같이 틀을 짜줍니다.

 <main id="main">
  <section id="mouseType">
    <div class="mouse__cursor"></div>
    <div class="mouse__cursor2"></div>
    <div class="mouse__wrap">
        지금 시작하세요. 미래는 아무에게도 약속되지 않았습니다.
        <p>Go for it <span class="style1">now</span>. The <span class="style2">future</span> is promise to<span class="style3"> no</span> one.</p>
        <p><span class="style4">지금</span> 시작하세요. <span class="style5">미래</span>는 <span class="style6">아무</span>에게도 약속되지 않았습니다.</p>
    </div>
  </section>
</main>

➰ CSS

마우스 커서와 마우스에 active가 들어왔을 때의 효과를 넣어줍니다.

/* mouseType */
.mouse__wrap {
  /* vw라고 써주면 스크롤바 생기기 때문에 */
  width: 100%;
  height: 100vh; 
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
  /* 두 줄로 나오게 하기 */
  flex-direction: column;
  cursor: none;
}
.mouse__wrap p {
  font-size: 2vw;
  line-height: 2;
  font-weight: 300;
}
.mouse__wrap p:last-child {
  font-size: 3vw;
  font-weight: 300;
}
.mouse__wrap p span {
  border-bottom: 0.15vw dashed rgb(255, 253, 164); 
  color: rgb(255, 253, 164);
}
@media (max-width: 800px) {
  .mouse__wrap p {
    font-size: 30px;
    padding: 0 20px;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 10px;
  }
  .mouse__wrap p:last-child {
    font-size: 40px;
    line-height: 1.5;
    text-align: center;
    /* 단어로 끊기 */
    word-break: keep-all;
  }
}
.mouse__cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  z-index: 9999;
  border-radius: 50%;
  background-color: rgba(225,225,225,0.1);
  /* 선택이나 클릭 안되게 할 때 */
  user-select: none;
  pointer-events: none;
  transition: transform 0.3s, opacity 0.2s;
}
.mouse__cursor2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  z-index: 9998;
  border-radius: 50%;
  background-color: rgba(225,225,225,0.3);
  /* 선택이나 클릭 안되게 할 때 */
  user-select: none;
  pointer-events: none;
  transition: transform 0.3s, opacity 0.2s;
}
.mouse__cursor.active {
  transform: scale(0);
}
.mouse__cursor2.active {
  transform: scale(5);
  background: rgba(255,166,0,0.6);
}
.mouse__cursor.active1{
  transform: scale(0);
}
.mouse__cursor2.active1{
  transform: scale(7);
  background-color: rgba(229, 67, 215, 0.484);
}
.mouse__cursor.active2{
  transform: scale(0)
}
.mouse__cursor2.active2{
  background-color: #9bfd7d;
  transform: scale(2) rotateY(720deg);
}

➰ JS

주석을 참고해주세요!

const cursor = document.querySelector(".mouse__cursor");
const cursor2 = document.querySelector(".mouse__cursor2");     
const span = document.querySelectorAll(".mouse__wrap span");
//마우스 좌표값 e : event
window.addEventListener("mousemove", e => {
    //커서 좌표값 할당
    // cursor.style.left = e.pageX -5 + "px";
    // cursor.style.top = e.pageY -5 + "px";
    // cursor2.style.left = e.pageX -15 + "px";
    // cursor2.style.top = e.pageY -15 + "px";

    //GSAP
    gsap.to(cursor, {duration: 0.3, left: e.pageX -5, top: e.pageY -5});
    gsap.to(cursor2, {duration: 0.8, left: e.pageX -15, top: e.pageY -15});

    //오버 효과

    //예전 버전 
    // span.forEach(function(){
    //     this.addEventListener("mouseenter", function(){})
    // })

    //최신 버전 : 화살표함수에서는 this 못 씀
    span.forEach(span => {
        //mouseenter / mouseover / 이벤트 버블링
        //마우스를 가져다 놓았을 때
        span.addEventListener("mouseenter", () => {
            cursor.classList.add("active");
            cursor2.classList.add("active");
        });
        //마우스가 떠났을 때
        span.addEventListener("mouseleave", () => {
            cursor.classList.remove("active");
            cursor2.classList.remove("active");
        });
        //마우스가 요소안으로 들어오는 순간 ( over : 이벤트 버블링 일어남 : 마우스 enter over차이 참고)
        document.querySelector(".active1").addEventListener("mouseover", () => {
          cursor.classList.add("active1");
          cursor2.classList.add("active1");
        })
        document.querySelector(".active1").addEventListener("mouseleave", () => {
          cursor.classList.remove("active1");
          cursor2.classList.remove("active1");
        })
        document.querySelector(".active2").addEventListener("mouseover", () => {
          cursor.classList.add("active2");
          cursor2.classList.add("active2");
        })
        document.querySelector(".active2").addEventListener("mouseleave", () => {
          cursor.classList.remove("active2");
          cursor2.classList.remove("active2");
        })  
    });
});   

'Effect(자바스크립트 활용) > Mouse Effect 마우스이펙트' 카테고리의 다른 글

"마우스이펙트 06" : 텍스트 효과  (3)	2022.09.29
"마우스이펙트 05" : 기울기 효과 / 글씨 반전 효과  (7)	2022.09.28
"마우스이펙트 04" : 이미지 효과 🏞  (3)	2022.09.22
"마우스이펙트 03" : 조명 효과 💡  (2)	2022.09.22
"마우스이펙트 01" : 커서에 다양한 효과 넣기  (1)	2022.09.06