naver deview페이지를 보고

커서가 신기했다. 이벤트를 보니 이런식으로 scale에 closest라는 메소드가 사용되어 있었다. 그래서 해당 element마다 .circle-active class를 달아 놓고 해당 element의 상위요소에 .circle-active가 있으면 scale의 변화를 주는 방식이었다.

그리고 커서의 색상은 z-index를 주고, mix-blend-mode를 설정해 주었다.

var e = function(e) {
	k.gsap.to(A.current, {
		duration: .01,
		overwrite: "auto",
		x: e.clientX,
		y: e.clientY,
        ease: "none",
        scale: function() {
        	return e.target.closest(".circle-active")
			? 1
			: e.target.closest(".view-cursor")
				? 2.3 : .23
		}
	})
};

아래는 노션 ai를 이용한 내용입니다.

---

JavaScript closest() 메소드에 대한 이해

JavaScript의 closest() 메소드는 DOM 요소에서 가장 가까운 상위 요소를 찾는 데 사용됩니다. 이 메소드는 주어진 셀렉터 또는 요소와 가장 가까운 상위 요소를 반환합니다.

closest() 메소드 사용법

closest() 메소드는 아래와 같은 방법으로 사용할 수 있습니다.

element.closest(selector)

• element: 기준 요소
• selector: 찾고자 하는 요소의 CSS 선택자

closest() 메소드 예제

<div class="parent">
  <div class="child">
    <div class="grandchild"></div>
  </div>
</div>

const grandchild = document.querySelector('.grandchild');

// closest() 메소드 사용
const parent = grandchild.closest('.parent');

console.log(parent); // <div class="parent">...</div>

closest() 메소드의 브라우저 호환성

closest() 메소드는 IE에서는 지원되지 않지만, 대부분의 최신 브라우저에서는 지원됩니다. 만약 IE에서도 사용해야 한다면, 폴리필을 사용하면 됩니다.

결론

JavaScript의 closest() 메소드는 DOM 요소에서 가장 가까운 상위 요소를 찾는 데 유용한 메소드입니다. 이를 이용하면 요소 간의 관계를 효과적으로 다룰 수 있습니다.