WEB 웹/JAVASCRIPT
Document (javascript30 - 13)
KIMSG
2017. 11. 23. 10:30
스크롤로 이동하여 이미지 화면이 다가오면 이미지를 슬라이드로 나타낸다.
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');
}
});
}
|
window.scrollY : 문서의 길이가 몇 픽셀만큼 스크롤이 되었는지 반환한다.
더 전문적인 용어로, scrollY 는 현재 viewport의 위쪽 가장자리의 Y좌표를 반환합니다.
만약 뷰포트가 없다면, 0이 반환됩니다.
브라우저 호환성을 위해, window.scrollY 대신 window.pageYOffset 을 사용하십시오 . 추가로, 이전 버전의 Internet Explorer ( < 9 ) 두가지의 속성을 모두 지원하지 않으므로
다른 비표준 속성을 사용하여 해결해야 합니다.
로고도 나와 있습니다.
mobile에서는 안드로이드는 (잘)될 것 같습니다.
innerHeight : 브라우저 안의 크기를 의미합니다.
맨처음 로딩된 화면 픽셀 + 스크롤 할 때마다의 픽셀 - 이미지 크기의 절반
=> 이미지 절반 에서 부터 시작한다. (이미지 슬라이드)