JS 및 CSS를 사용한 스포트라이트 효과

스포트라이트 효과는 웹 사이트에서 콘텐츠를 드러내는 매우 창의적인 방법이 될 수 있습니다. 그리고 약간의 JS와 CSS만 있으면 놀라울 정도로 쉽게 만들 수 있습니다!

기본 아이디어

TLDR; CSS 방사형 그래디언트 배경을 사용한 다음 JS를 사용하여 마우스 움직임을 추적하고 그래디언트 중심을 이동합니다.

이 작업을 수행하는 더 복잡한 다른 방법이 있습니다. 캔버스 또는 외부 라이브러리를 사용할 수 있지만 더 간단한 접근 방식이 좋은 출발점이며 대부분의 사용 사례에서 충분히 잘 작동해야 합니다.

시작하자:

#spotlight {
  position: fixed;
  opacity: 1;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  pointer-events: none;
}

<div id="spotlight"></div>

const spotlightEl = document.querySelector("#spotlight");

function handleMouseMove(event) {
    const { clientX, clientY } = event;

    spotlightEl.style.background = `radial-gradient(circle at ${clientX}px ${clientY}px, #00000000 10px, #000000ee 350px)`;
}

document.addEventListener("mousemove", handleMouseMove)

그리고...그게 전부입니다.
#spotlight div는 항상 전체 뷰포트를 포함하도록 배치됩니다. 그런 다음 이벤트 리스너를 연결하여 마우스의 움직임을 듣고 X CSS 값에 Y 및 radial-gradient를 직접 설정합니다.
#00000000 10px, #000000ee 350px 부분은 기본적으로 중앙이 투명한 그래디언트를 원한다는 의미이며 중앙에서 350px는 약간 투명한 검은색입니다. 이것이 그래디언트 센터가 그 아래에 있는 것을 드러내는 방식입니다.

구성 가능하게 만들기

지금까지 기본 스포트라이트가 있으므로 계속해서 개선해 보겠습니다.

새 스포트라이트를 쉽게 설정하고 몇 가지 옵션을 전달할 수 있는 Spotlight 클래스를 만들 수 있습니다.

toggleEl는 스포트라이트를 토글하기 위한 트리거로 사용하려는 요소의 ID입니다.

innerRadius 및 outerRadius는 스포트라이트 크기를 설정합니다.

outerColor는 배경색을 설정합니다(진정한 최첨단 경험을 위해 red를 전달해 보십시오).

이 클래스는 스포트라이트를 켜고 끄는 방법도 제공합니다.

조명을 더욱 자연스럽게 연출

조금 더 자연스럽게 보이도록 몇 가지 추가 터치가 있습니다.

첫째, 스포트라이트 이동에 약간의 지연이 있습니다. 이렇게 하면 마우스로 라이트를 드래그하는 것처럼 라이트에 무게감을 더할 수 있습니다.

handleMouseMove(event: MouseEvent) {
    setTimeout(() => {
      this.updateEl(event.clientX, event.clientY);
    }, 50);
}

또한 빛이 계속해서 증가하고 감소하는 약간의 "펄스"를 볼 수 있습니다.

하지만 어떻게 작동시킬 수 있습니까?

내 첫 번째 본능은 그래디언트 크기에 애니메이션을 적용하는 것이었지만 CSS에서는 실제로 불가능합니다! 다음으로 outerRadius 에서 호출되는 함수 내에서 단계적으로 setInterval 값을 변경하는 방법을 생각했지만 정말 바보 같은 생각이었습니다. 마지막으로 CSS 애니메이션으로 전체 스포트라이트 div의 크기를 애니메이션으로 만드는 간단한 솔루션을 생각해 냈습니다.

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

this.el.style.animation =
        "pulse 3s ease-in-out infinite alternate forwards";

이렇게 하면 실제 그래디언트를 건드릴 필요가 없으며 프로세스에서 그래디언트를 늘이면서 전체 "캔버스"에 애니메이션을 적용하기만 하면 됩니다. 또한 "켜기/끄기"부분에 CSS 애니메이션을 사용했습니다.

마무리

분명히 모든 단일 페이지에서 스포트라이트를 사용해서는 안 됩니다(제발 사용하지 마세요!). 그러나 올바르게 사용하면 사용자가 멋진 숨겨진 콘텐츠를 처음으로 발견하는 것처럼 느낄 수 있는 좋은 방법입니다.

읽어 주셔서 감사합니다!