사전파악

• debounce 와 throttle 중에 debounce 를 적용한다.
  • 이를 이벤트가 끝나는 시점에서 발동하는 트리거같은 것
• debounce 가 작동하면, 특정 slide-in 이미지에 active 클래스를 추가하면 될 것 같다.

키워드

• 이미지의 절반 부분까지 뷰포트에 보일경우 이미지 Active
  • 반대로, 절반이상 아직 안보이면 unActive
• 이미지 바닥이 뷰포트에서 사라지면 unActive
  • 반대로 바닥이 조금이라도 보이면 다시 Active

DOM

• window.scrollY
  • 뷰포트의 맨상단에서 부터, 내려온 스크롤 높이
• window.innerHeight
  • 현재 뷰포트의 전체 높이
• 요소.height
  • 요소의 전체높이
• 요소.offsetTop
  • 전체 뷰포트에서 요소의 상단부가 나오는 시점의 높이

요소가 보이는시점 계산

• (window.scrollY + window.innerHeight) === 요소.offsetTop 인 시점
• 좀 더 자연스러움을 위해 (window.scrollY + window.innerHeight) - 요소.height / 2 에 해당하는 observer 가, 오리지날 요소.offsetTop 이상일 경우부터 ⇒ Active

요소바닥계산

• (요소.offsetTop + 요소.height)
• window.scrollY 가 (요소.offsetTop + 요소.height) 보다 작을 때까지 ⇒ Active

결과적으로

(window.scrollY + window.innerHeight) - 요소.height / 2 > 요소.offsetTop &&

(요소.offsetTop + 요소.height) > window.scrollY