Dragonball Online Goku Hand
본문 바로가기
Effect(자바스크립트 활용)/Mouse Effect 마우스이펙트

"마우스이펙트 01" : 커서에 다양한 효과 넣기

by 별의 코비 2022. 9. 6.
728x90

🖱 마우스 이펙트 : 커서 변경/특정 단어에 올렸을 때 마우스 커서의 크기 변화 + 애니메이션 등

📌 마우스를 hover했을 때 나타나는 효과를 다양하게 만들어봅시다!

마우스 이펙트 완성본⭐️

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

➰ HTML

main을 통해 mouse부분을 묶어 주었습니다.
마음에 드는 명언을 골라 핵심 부분을 span으로 묶어주었으며 class를 주었습니다.
mouse__info에는 마우스가 움직일 때 마우스의 좌표값들을 알려주는 속성을 브라우저, 요소, 페이지, 디바이스 기준으로 나누어 클래스로 지정해주었습니다. 

<main id="main">
  <section id="mouseType">
    <div class="mouse__cursor"></div>
    <div class="mouse__wrap">
        <p>The <span class="style1">future</span> depends on what we <span class="style2">do</span> in the <span class="style3">present</span></p>
        <p><span class="style4">미래</span>는 <span class="style5">현재</span> 우리가 무엇을 <span class="style6">하는가</span>에 달려 있다.</p>
    </div>
  </section>

    <div class="mouse__info">
      <ul>
        <li>clientX : <span class="clientX">0</span>px</li>
        <li>clientY : <span class="clientY">0</span>px</li>
        <li>offsetX : <span class="offsetX">0</span>px</li>
        <li>offsetY : <span class="offsetY">0</span>px</li>
        <li>pageX : <span class="pageX">0</span>px</li>
        <li>pageY : <span class="pageY">0</span>px</li>
        <li>screenX : <span class="screenX">0</span>px</li>
        <li>screenY : <span class="screenY">0</span>px</li>
      </ul>
    </div>
</main>

➰ CSS

마우스 커서에 transform이나 border-radius 등으로 효과를 주었습니다. 

/* 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: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid#fff;
  background-color: rgba(225,225,225,0.1);
  /* 선택이나 클릭 안되게 할 때 */
  user-select: none;
  pointer-events: none;
  transition: 
    background-color 0.3s,
    border-color 0.3s,
    /* style 2에 트랜스폼줬으니 여기도 줘야함 */
    transform 0.6s,
    border-radius 0.3s
    ;
}
.mouse__cursor.style1{
  background-color: rgba(229, 67, 215, 0.484);
  border-color: #de78f3;
}
.mouse__cursor.style2{
  background-color: rgba(111, 235, 94, 0.584);
  border-color: #9bfd7d;
  /* 커지고 y축으로 회전 */
  transform: scale(2) rotateY(720deg);
}
.mouse__cursor.style3{
  background-color: rgba(90, 128, 233, 0.721);
  border-color: #2f3cb4;
  /* 커지고 x축으로 회전 */
  transform: scale(1.5) rotateX(720deg);
}
.mouse__cursor.style4{
  background-color: rgba(235, 235, 69, 0.606);
  border-color: #f2fc59;
  /* 커지는 효과 */
  transform: scale(10);
}
.mouse__cursor.style5{
  background-color: rgba(243, 209, 141, 0.868);
  border-color: #f5ab77;
}
.mouse__cursor.style6{
  background-color: rgba(145, 248, 131, 0.846);
  border-color: #ccfdb0;
  border-radius: 0;
  /* 커지는 효과 */
  transform: scale(5); 
}
.mouse__info {
  position: absolute;
  left: 20px;
  bottom: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: #fff;
}

➰ Javascript

설명은 주석을 확인해주세요:) 

// 마우스 따라다니게 하기
// 마우스가 움직였을 때 마우스 움직이는 값(event)을 가져올 수 있음
window.addEventListener("mousemove", (event) => {
  document.querySelector(".clientX").innerText = event.clientX
  document.querySelector(".clientY").innerText = event.clientY
  document.querySelector(".offsetX").innerText = event.offsetX
  document.querySelector(".offsetY").innerText = event.offsetY
  document.querySelector(".pageX").innerText = event.pageX
  document.querySelector(".pageY").innerText = event.pageY
  document.querySelector(".screenX").innerText = event.screenX
  document.querySelector(".screenY").innerText = event.screenY
});

const cursor = document.querySelector(".mouse__cursor")

window.addEventListener("mousemove", (e) => {
  //const cursor = document.querySelector(".mouse__cursor")
  //커서에 포지션 되어있기 때문에 left
  //px 처럼 단위값을 써주어야 실행됨
  cursor.style.left = e.clientX -25 + "px";
  cursor.style.top = e.clientY -25 + "px";
});

// document.querySelector(".style1").addEventListener("mouseover", () => {

//   //작동안함 : 위에 지역변수 이기 때문에
//   //cursor.classList.add(".style1");
//   cursor.classList.add("style1");
// })
// document.querySelector(".style1").addEventListener("mouseout", () => {
//   cursor.classList.remove("style1");
  
// })
// document.querySelector(".style2").addEventListener("mouseover", () => {
//   cursor.classList.add("style2");
// })
// document.querySelector(".style2").addEventListener("mouseout", () => {
//   cursor.classList.remove("style2");
// })

// document.querySelector(".style3").addEventListener("mouseover", () => {
//   cursor.classList.add("style3");
// })
// document.querySelector(".style3").addEventListener("mouseout", () => {
//   cursor.classList.remove("style3");
// })

// document.querySelector(".style4").addEventListener("mouseover", () => {
//   cursor.classList.add("style4");
// })
// document.querySelector(".style4").addEventListener("mouseout", () => {
//   cursor.classList.remove("style4");
// })

// document.querySelector(".style5").addEventListener("mouseover", () => {
//   cursor.classList.add("style5");
// })
// document.querySelector(".style5").addEventListener("mouseout", () => {
//   cursor.classList.remove("style5");
// })

// document.querySelector(".style6").addEventListener("mouseover", () => {
//   cursor.classList.add("style6");
// })
// document.querySelector(".style6").addEventListener("mouseout", () => {
//   cursor.classList.remove("style6");
// })

// for문 이용
// for(let i=1; i<7; i++){
//   document.querySelector(".style" + i).addEventListener("mouseover", () => {
//     cursor.classList.add("style" + i)})
//   document.querySelector(".style" + i).addEventListener("mouseout", () => {
//    cursor.classList.remove("style" + i)})
// };

//forEach() method 1(M)
// const num = [1, 2, 3, 4, 5, 6]
// num.forEach((el)=>{
//   document.querySelector(".style" + [el]).addEventListener("mouseover", () => {
//     cursor.classList.add("style" + [el])})
//   document.querySelector(".style" + [el]).addEventListener("mouseout", () => {
//     cursor.classList.remove("style" + [el])})
// })

//forEach() method 2(T)
// document.querySelectorAll(".mouse__wrap span").forEach((span, num) => {
//   span.addEventListener("mouseover", () => {
//     cursor.classList.add("style" + (num+1))
//   })
//   span.addEventListener("mouseout", () => {
//     cursor.classList.remove("style" + (num+1))
//   })
// })

//속성값 가져오기 (만약에 class="style55"이럴때 : 클래스 명이 바껴도 상관없게!)
//getAttribute
document.querySelectorAll(".mouse__wrap span").forEach( span => {
  let attr = span.getAttribute("class");
  span.addEventListener("mouseover", () => {
    cursor.classList.add(attr)
  })
  span.addEventListener("mouseout", () => {
    cursor.classList.remove(attr)
  })
})

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

"마우스이펙트 06" : 텍스트 효과  (3) 2022.09.29
"마우스이펙트 05" : 기울기 효과 / 글씨 반전 효과  (7) 2022.09.28
"마우스이펙트 04" : 이미지 효과 🏞  (3) 2022.09.22
"마우스이펙트 03" : 조명 효과 💡  (2) 2022.09.22
"마우스이펙트 02" : 커서 두 개를 통해 다양한 효과 내기  (4) 2022.09.19

관련글

댓글

티스토리툴바