[Mouse Effect] 마우스 이펙트 01

마우스 이펙트 01

이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 마우스 이펙트를 만들어보도록 하겠습니다.

HTML 소스 보기

header, main(명언 & mouseInfo(마우스 커서 좌표값 표시)), footer(모달 박스) 크게 3가지로 이루어져 있다. footer의 모달 박스 내용은 너무 길어지므로 생략한다. 모달 박스를 나타내는 방법에 대해서는 이전에 업로드한 슬라이드 이펙트 게시물을 참조할 것.

<body class="img04"> <!-- 백그라운드 이미지 / CSS로 이미지 출력시킴 -->
    <header id="header">
        <h1>JAVASCRIPT MOUSE EFFECT 01</h1>
        <p>마우스 이펙트 - 마우스 따라다니기</p>
        <ul>
            <li class="active"><a href="mouseEffect01.html">01</a></li>
            <li><a href="mouseEffect02.html">02</a></li>
            <li><a href="mouseEffect03.html">03</a></li>
            <li><a href="mouseEffect04.html">04</a></li>
            <li><a href="mouseEffect05.html">05</a></li>
            <li><a href="mouseEffect06.html">06</a></li>
            <li><a href="mouseEffect07.html">07</a></li>
        </ul>
    </header>
    <!-- //header -->

    <main id="main">
      <section id="mouseType">
        <div class="mouse__cursor"></div>
        <div class="mouse__wrap">
          <p><span class="style1">The future</span> depends on <span class="style2">what we 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>
    <!-- //main -->

    <footer>
        <!-- 모달 박스 내용 들어갈 곳. 길어지므로 생략. -->
    </footer>
    <!-- //footer -->
</body>

JavaScript 소스 보기 : 마우스 커서 만들고 적용하기

먼저 마우스 움직이는 값을 가져와 HTML 상에 표기시킨 다음, CSS로 만든 마우스 커서를 새로 생성한 const 상수에 저장시켜 적용한다.

// 마우스 움직이는 값 가져오기 - 마우스 커서 좌표값을 표시시킴
// mouseInfo로부터 떨어진 값 == 좌표값
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;
});

// css로 만든 마우스커서 적용시키기
const cursor = document.querySelector(".mouse__cursor");

window.addEventListener("mousemove", (e) => {
  cursor.style.left = e.clientX - 25 + "px";
  cursor.style.top = e.clientY -25 + "px";
});

JavaScript 소스 보기 : 만든 마우스 커서에 CSS 입히기

마우스 커서를 올리는 곳마다(= hover하는 곳마다) 커서 모양을 다르게 CSS에서 설정해준 다음, 그걸 자바스크립트를 통해 적용시켜주도록 한다. forEach문과 getAtrribute()를 쓸 것을 권장.

하단의 CSS 소스 보기 버튼을 눌러 마우스 커서에 입혀진 CSS 속성을 확인할 수 있다.

// 적용한 마우스커서에 CSS 입히기 (수동)
// document.querySelector(".style1").addEventListener("mouseover", () => {
//   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 <= 6; i++) {
//   document.querySelector(".style" + i).addEventListener("mouseover", () => {
//     cursor.classList.add("style" + i);
//   });
//   document.querySelector(".style" + i).addEventListener("mouseout", () => {
//   cursor.classList.remove("style" + i);
//   });
// };

// forEach
// 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));
//   });
// });

// getAtrribute() : 'style'이 담김 클래스값을 그대로 가져와 더 정확한 방법
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);
  });
});

결과

원본(HTML/JS) 소스 보기

CSS 소스 보기

'Effect > Mouse Effect' 카테고리의 다른 글

[Mouse Efffect] 마우스 이펙트 06 (2)	2022.09.29
[Mouse Effect] 마우스 이펙트 05 - 기울기 효과 / 글씨 반전 효과 (3)	2022.09.28
[Mouse Effect] 마우스 이펙트 04 - 이미지 효과 (5)	2022.09.22
[Mouse Effect] 마우스 이펙트 03 - 조명 효과 (4)	2022.09.22
[Mouse Effect] 마우스 이펙트 02 - GSAP (2)	2022.09.18

코딩공책📚

[Mouse Effect] 마우스 이펙트 01

마우스 이펙트 01

HTML 소스 보기

JavaScript 소스 보기 : 마우스 커서 만들고 적용하기

JavaScript 소스 보기 : 만든 마우스 커서에 CSS 입히기

결과

'Effect > Mouse Effect' 카테고리의 다른 글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바

[Mouse Effect] 마우스 이펙트 01

마우스 이펙트 01

HTML 소스 보기

JavaScript 소스 보기 : 마우스 커서 만들고 적용하기

JavaScript 소스 보기 : 만든 마우스 커서에 CSS 입히기

결과

'Effect > Mouse Effect' 카테고리의 다른 글

관련글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바