[자바스크립트] 페이지 클릭 애니메이션

꽁기웹디님의 포스트를 보고 꽤 재미있는 기능 같아 만들어봤습니다.

페이지 아무 곳이나 클릭했을 때 원이 잠깐 생깁니다.

지금 보고 계신 페이지에도 효과를 적용해뒀으니, 페이지 아무 곳이나 클릭해보세요!

HTML

CSS

@keyframes clicked {
    from {
        transform: scale(0);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

#clickEffect {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    pointer-events: none
}

#clickEffect::after {
    content: "";
    display: block;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    border-radius: 50%
}

#clickEffect.effect {
    display: block
}

#clickEffect.effect::after {
    animation: clicked .5s cubic-bezier(.29, 0, .15, 1)
}

clicked란 애니메이션과 #clickEffect::after을 손보셔서 원하시는 애니메이션을 구현하실 수 있습니다.

Javascript (Vanilla)

let removeTimeOut;

function clickPosition(e) {
  const target = document.getElementById("clickEffect"),
    a = 40; // #clickEffect의 너비 & 높이 값 / 2

  (e.button === 0) && (
    target.style.transform = `translate(${e.clientX - a}px, ${e.clientY - a}px)`,
    target.classList.contains("effect")
    ? (
      clearTimeout(removeTimeOut),
      target.classList.remove("effect"),
      void target.offsetWidth,
      target.classList.add("effect"),
      removeEffect()
    )
    : (
      target.classList.add("effect"),
      removeEffect()
    )
  )
}

function removeEffect() {
  removeTimeOut = setTimeout(function () {
    document.getElementById("clickEffect").classList.remove("effect")
  }, 500) // #clickEffect.effect::after의 시간 (.5s) * 1000
}

document.addEventListener("mousedown", clickPosition)

css를 변경하시면 각주가 있는 부분도 꼭< 함께 수정하셔야 원활하게 작동합니다.

#clickEffect의 z-index도 본인 페이지에 맞게 적절히 수정해주세요.

티스토리툴바