Document (javascript30 - 13)

스크롤로 이동하여 이미지 화면이 다가오면 이미지를 슬라이드로 나타낸다.

(https://github.com/KIMSG/javascript30/blob/master/day13/index.html)

debouce  함수는 이미지를 나타내게 해주는 함수이다.

1 2 3 4 5 6 7 8 9 10 11 12 13

function checkSlide(e) {      sliderImages.forEach(sliderImage => {          const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;          const imageBottom = sliderImage.offsetTop + sliderImage.height;          const isHalfShown = slideInAt > sliderImage.offsetTop;          const isNotScrolledPast = window.scrollY < imageBottom;          if(isHalfShown && isNotScrolledPast){              sliderImage.classList.add('active');          }else {                 sliderImage.classList.remove('active');          }     }); }     Colored by Color Scripter

cs

window.scrollY : 문서의 길이가 몇 픽셀만큼 스크롤이 되었는지 반환한다.

https://developer.mozilla.org/ko/docs/Web/API/Window/scrollY

더 전문적인 용어로,  scrollY 는 현재 viewport의 위쪽 가장자리의 Y좌표를 반환합니다.

만약 뷰포트가 없다면, 0이 반환됩니다.

브라우저 호환성을 위해, window.scrollY 대신 window.pageYOffset 을 사용하십시오 . 추가로, 이전 버전의 Internet Explorer ( < 9 ) 두가지의 속성을 모두 지원하지 않으므로

다른 비표준 속성을 사용하여 해결해야 합니다.

로고도 나와 있습니다.

mobile에서는 안드로이드는 (잘)될 것 같습니다.

innerHeight : 브라우저 안의 크기를 의미합니다.

https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight

맨처음 로딩된 화면 픽셀 + 스크롤 할 때마다의 픽셀 - 이미지 크기의 절반

=> 이미지 절반 에서 부터 시작한다. (이미지 슬라이드)