마우스 이펙트 01

The future depends on what we do in the present.

미래는 현재 우리가 무엇을 하는가에 달려 있다.

clientX : 0px
clientY : 0px
offsetX : 0px
offsetY : 0px
pageX : 0px
pageY : 0px
screenX : 0px
screenY : 0px

소스 보기

Javascript

HTML

CSS

<script>
  // 마우스 움직이는 값 가져오기 - 마우스 커서 좌표값을 표시시킴
  // 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";
  });

  // 마우스 커서 변경하기 (수동)
  // 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);
    });
  });
</script>

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

<style> 
  .mouse__cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid #fff;
    background-color: rgba(255,255,255,0.1);
    transition: 
      background-color 0.3s,
      border-color 0.3s,
      transform 0.6s,
      border-radius 0.3s
    ;
    user-select: none;
    pointer-events: none;
  }
  .mouse__cursor.style1 {
    background-color: rgba(255, 166, 0, 0.5);
    border-color: rgba(255, 166, 0, 1);
  }
  .mouse__cursor.style2 {
    background-color: rgba(238, 130, 238, 0.5);
    border-color: rgba(238, 130, 238, 1);
    transform: scale(2) rotateY(720deg);
  }
  .mouse__cursor.style3 {
    background-color: rgba(176, 224, 230, 0.5);
    border-color: rgba(176, 224, 230, 1);
    transform: scale(1.5) rotateX(45deg);
  }
  .mouse__cursor.style4 {
    background-color: rgba(152, 251, 152, 0.5);
    border-color: rgba(152, 251, 152, 1);
    transform: scale(5);
  }
  .mouse__cursor.style5 {
    background-color: rgba(188, 143, 143, 0.5);
    border-color: rgba(188, 143, 143, 1);
  }
  .mouse__cursor.style6 {
    background-color: rgba(216, 112, 147, 0.5);
    border-color: rgba(216, 112, 147, 1);
    border-radius: 0;
    transform: scale(2.5);
  }
</style>