Nephrite21

Intersection Observer 홈페이지에 적용하기. 현재 블로그 상태이다. 현재 블로그는 scroll-snap을 이용하여 한 페이지(내용이 달라지는 부분마다 페이지로 구분)씩 스크롤 되게 되어있다. 여기서 스크롤을 내렸을 때 현재 스크롤의 위치가 어디인지 알려주고, 클릭 시 이동할 수 있는 Indicator를 우측에 제작할 예정이다. 이 과정에서 현재 index를 Intersection Observer를 통해 받아오고, 이를 활용해서 indicator의 색상변환/애니메이션 활성화 등을 할 수 있는 구조를 만들 계획이다. observer를 통해 현재 인덱스 값을 받아오는 구조를 먼저 만들어 보도록 하겠다. Intersection Observer 등록 가장먼저 할 일은 Intersection Obs..

Intersection Observer 현재 웹 페이지의 우측부분에 인디케이터(현재 페이지가 어디인지 알려주는 UX 디자인)을 만들기 위해 Intersection Observer를 활용해보기로 했다. Intersection Observer는 Target Element가 화면에 노출되었는지를 보여주는 API이다. scroll 이벤트를 활용하는 것과는 달리 성능에 이점을 가진다. 자세한 설명은 다른 블로그에서 잘 설명했으므로 생략하겠다. 활용방법 기본적으로 Intersection Observer는 변수에 IntersectionObserver 인스턴스를 할당하고, 관찰 하고자 하는 element를 할당해주어서 작동한다. const observer = new IntersectionObserver(callback..