마우스 이펙트 02

The most difficult thing is the decision to act, the rest is merely tenacity.

가장 어려운 것은 행동하기로 결정하는 것이며, 나머지는 단지 끈기있게 하는 것이다

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

소스 보기

Javascript

HTML

CSS

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) => {
  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문
const count = document.querySelectorAll(".mouse__wrap span");
//   console.log(count);
//   for (let i = 1; i <= count.length; i++) {
//     // console.log(".style" + 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));
//     });
//   });

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

<main id="main">
    <section id="mouseType">
      <div class="mouse__cursor"></div>
      <div class="mouse__wrap">
        <p>
          The <span class="style1">most difficult thing</span> is the decision to <span class="style2">act</span>, the rest is merely
          <span class="style3">tenacity</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>

/* mouseType */
.mouse__wrap {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: white;
  overflow: hidden;
  cursor: none;
}
.mouse__wrap p {
  font-size: 2vw;
  line-height: 2;
  font-weight: 300;
}
.mouse__wrap p:last-child {
  font-weight: 300;
  font-size: 3vw;
}
.mouse__wrap p span {
  border-bottom: 0.15vw dashed orange;
  color: orange;
}

@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;
  }
}
.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);
  border-color: rgba(187, 127, 255, 0.6);
  box-shadow: -1px 1px 20px aquamarine;
  user-select: none;
  pointer-events: none;
  transition: background-color 0.3s, border-color 0.3s, transform 0.6s;
}
.mouse__cursor.style1 {
  background-color: rgba(255, 165, 0, 0.4);
  border-color: orange;
}
.mouse__cursor.style2 {
  background-color: rgba(140, 0, 255, 0.4);
  border-color: rgb(140, 0, 255);
  transform: scale(2) rotateX(720deg);
}
.mouse__cursor.style3 {
  background-color: rgba(255, 68, 0, 0.4);
  border-color: snow;
  transform: scale(1.5) rotateY(180deg);
}
.mouse__cursor.style4 {
  background-color: rgba(0, 0, 0, 0.4);
  border-color: bisque;
  transform: scale(5) skew(-20deg);
}
.mouse__cursor.style5 {
  background-color: rgba(100, 148, 237, 0.4);
  border-color: lemonchiffon;
}
.mouse__cursor.style6 {
  background-color: rgba(250, 128, 114, 0.4);
  border-color: aquamarine;
}
.mouse__info {
  position: absolute;
  left: 20px;
  bottom: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: white;
}