https://codepen.io/hongshii0i0i/pen/LYXRBgL
function debounce(func, wait = 20, immediate = true) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
function scrollHandler() {
const scrollImg = document.querySelectorAll('img');
const scrollPosition = window.innerHeight + window.scrollY;
scrollImg.forEach(img => {
const imageBottom = img.offsetTop + img.height;
if(img.offsetTop < scrollPosition && window.scrollY < imageBottom) {
img.classList.add('active');
} else {
img.classList.remove('active');
}
});
}
window.addEventListener('scroll', scrollHandler);
scrollHandler부분만 내가 했다.
img가 nodeList라서 반복문을 사용했고 img란 매개변수를 imageBottom에도 사용하기 위에 반복문 안에 써줬다.
'언어 > JavaScript' 카테고리의 다른 글
[airdatepicker]데이트피커 주간으로 선택하기 (0) | 2023.08.24 |
---|---|
[javascript] 프로그레스 바 색상 나눠서 채우기 (0) | 2023.07.21 |
[javascript30] 05-flex panel gallery (0) | 2023.06.22 |
[javascript] 배열 split(), join(), 전개연산자 (0) | 2023.06.20 |
[javascript] 배열 push(), unshift(), shift(), pop() (0) | 2023.06.19 |