마우스 이펙트

The way to get started is to quit talking and begin doing.

무언가를 시작하려면 말은 멈추고 행동해야 한다.

소스 보기

Javascript

HTML

CSS

const cursor = document.querySelector(".mouse__cursor")
const cursor2 = document.querySelector(".mouse__cursor2")
const span = document.querySelectorAll(".mouse__wrap span")
const header = document.querySelectorAll("#header")
const btn = document.querySelectorAll(".modal__wrap .modal__btn")

window.addEventListener("mousemove", e => {
  //커서에 좌표값 할당
  // cursor.style.left = e.pageX-5 + "px";
  // cursor.style.top = e.pageY-5 + "px";

  // cursor2.style.left = e.pageX-15 + "px";
  // cursor2.style.top = e.pageY-15 + "px";

  //GSAP
  gsap.to(cursor, {duration: 0.15, left:e.pageX-5, top:e.pageY-5});
  gsap.to(cursor2, {duration: 0.5, left:e.pageX-15, top:e.pageY-15});


  //오버 효과
  // mouseenter / mouseover  / 이벤트 버블링 
  span.forEach(span => {
      span.addEventListener("mouseenter", ()=>{
        cursor.classList.add("active");
        cursor2.classList.add("active");
      });
      span.addEventListener("mouseleave", ()=>{
        cursor.classList.remove("active");
        cursor2.classList.remove("active");
      });
  });

  //옛날 효과
  // span.forEach(function(){
  //   this.addEventListener("mouseenter", function(){});
  // })

  header.forEach( header => {
      header.addEventListener("mouseenter", ()=>{
        cursor.classList.add("active");
        cursor2.classList.add("active");
      });
      header.addEventListener("mouseleave", ()=>{
        cursor.classList.remove("active");
        cursor2.classList.remove("active");
      });
  })

  btn.forEach( btn => {
    btn.addEventListener("mouseenter", ()=>{
        cursor.classList.add("show");
        cursor2.classList.add("show");
      });
      btn.addEventListener("mouseleave", ()=>{
        cursor.classList.remove("show");
        cursor2.classList.remove("show");
      });
  })
})

<main id="main">
  <section id="mouseType">
    <div class="mouse__cursor"></div>
    <div class="mouse__cursor2"></div>
    <div class="mouse__wrap">
      <p class="Nix"><span>Nature</span> never <span>deceives</span> us it is we who deceive <span>ourselves</span></p>
      <p class="arir"><span>자연</span>은 인간을 결코 <span>속이지 않는다.</span> 우리를 속이는 것은 항상 <span>우리 자신</span>이다.</p>
    </div>
  </section>
</main>

/* mouseType */
body::after {

    background:rgba(43, 37, 59, 0.651);
}


.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: 1.5vw;
  line-height: 2;
  font-weight: 300;
}

.mouse__wrap p:last-child {
  font-size: 1.8vw;
  font-weight: 500;
}

.mouse__wrap p span {
  border-bottom: 0.05vw solid rgb(219, 73, 146);
  color: rgb(219, 73, 146);
}


@media( max-width : 800px){
    .mouse__wrap p {
        padding: 0 20px;
        font-size: 18px;
        line-height: 1.5;
        text-align: center;
        margin-bottom: 10px;
    }

    .mouse__wrap p:last-child {
      font-size: 24px;
      line-height: 1.5;
      text-align: center;
      word-break: keep-all;
    }
}

.mouse__cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  z-index: 9999;
  border-radius: 50%;
  background: rgba(255, 42, 219, 0.3);
  user-select: none;
  pointer-events: none;
  transition: transform 0.3s, opactiy 0.2s;
}

.mouse__cursor2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  z-index: 9998;
  border-radius: 50%;
  background: rgba(255, 156, 230, 0.5);
  user-select: none;
  pointer-events: none;
  transition: transform 0.3s, opactiy 0.2s;
}

.mouse__cursor.active {
  transform: scale(0);
}
.mouse__cursor2.active {
  transform: scale(3);
  background: rgba(255, 42, 219, 0.3);
}

.mouse__cursor.show {
  transform: scale(0);
}
.mouse__cursor2.show {
  transform: scale(3);
  background: rgba(40, 169, 255, 0.3);
}