마우스 이펙트01

Learn as if you will live forever, live like you will die tomorrow.

영원히 살 것처럼 배우고, 내일 죽을 것처럼 살아라

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

소스 보기

Javascript

HTML

CSS


  const cursor = document.querySelector(".mouse__cursor");
      let count = document.querySelectorAll(".mouse__wrap span");

      window.addEventListener("mousemove", (event) => {
        document.querySelector(".clientX").textContent = event.clientX;
        document.querySelector(".clientY").textContent = event.clientY;
        document.querySelector(".offsetX").textContent = event.offsetX;
        document.querySelector(".offsetY").textContent = event.offsetY;
        document.querySelector(".pageX").textContent = event.pageX;
        document.querySelector(".pageY").textContent = event.pageY;
        document.querySelector(".screenX").textContent = event.screenX;
        document.querySelector(".screenY").textContent = event.screenY;

        cursor.style.left = event.clientX - 25 + "px";
        cursor.style.top = event.clientY - 25 + "px";
      });

      count.forEach((el) => {
        let attr = el.getAttribute("class").split(" ");
        let attrr = [];
        attr.map((e) => {
          if (e.includes("style")) return attrr.push(e);
        });

        document.querySelector(`.${attrr}`).addEventListener("mouseover", () => {
          cursor.classList.add(`${attrr}`);
        });
        document.querySelector(`.${attrr}`).addEventListener("mouseout", () => {
          cursor.classList.remove(`${attrr}`);
        });
      });

<main id="main">
  <section id="mouseType">
    <div class="mouse__cursor"></div>
    <div class="mouse__wrap">
      <p>
        <span class="style1">Learn</span> as if you will live <span class="style2">forever</span>, live
        like you will <span class="style3">die</span> tomorrow.
      </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>


  /* mouseType */
      
      .mouse__wrap {
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #fff;
        overflow: hidden;
        cursor: none;
      }
      .mouse__wrap p {
        font-size: 2vw;
        line-height: 2;
        font-weight: 300;
      }
      .mouse__wrap p:last-child {
        font-size: 3vw;
        font-weight: 400;
      }
      .mouse__wrap p span {
        border-bottom: 0.15vw dashed orange;
        color: orange;
      }
      .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);
        user-select: none;
        pointer-events: none;
        transition: background-color 0.3s, border-color 0.3s;
      }
      .mouse__cursor.style1{
        background-color: rgba(255, 165, 0, 0.4);
        border-color: rgb(135, 236, 228);
      }
      .mouse__cursor.style2{
        background-color: rgba(46, 235, 112, 0.4);
        border-color: rgb(239, 202, 91);
        transform: scale(2) rotateY(720deg);
      }
      .mouse__cursor.style3{
        background-color: rgba(69, 246, 231, 0.779);
        border-color: orange;
      }
      .mouse__cursor.style4{
        background-color: rgba(213, 233, 215, 0.4);
        border-color: rgb(5, 185, 197);
      }
      .mouse__cursor.style5{
        background-color: rgba(190, 86, 194, 0.4);
        border-color: rgb(241, 157, 254);
      }
      .mouse__cursor.style6{
        background-color: rgba(252, 140, 203, 0.4);
        border-color: rgb(68, 158, 69);
      }
      .mouse__info {
        position: absolute;
        left: 20px;
        bottom: 10px;
        font-size: 14px;
        line-height: 1.6;
        color: #fff;
      }
      @media (max-width: 800px) {
        .mouse__wrap p {
          padding: 0 20px;
          font-size: 24px;
          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;
        }
      }