[TIL] 스크롤 시 이미지 로딩

[TIL] 스크롤 시 이미지 로딩

---

• Javascript 30에서 자주 쓸 것 같은 기능이 있길래 따로 포스팅 한다.

JS 코드

function checkSlide(e) {
      sliderImages.forEach((img) => {
        //window.scrollY + window.innerHeight => 현재 화면 제일 밑
        const slideInAt = (window.scrollY + window.innerHeight) - img.height / 2;
        
        // img.offsetTop => 화면의 맨 위에서 이미지의 최상단까지의 거리
        const imageBottom = img.offsetTop + img.height;

        const isHalfShown = slideInAt > img.offsetTop;

        const isNotScrolledPast = window.scrollY < imageBottom;
        
        if (isHalfShown && isNotScrolledPast) {
          img.classList.add('active');
        } else {
          img.classList.remove('active');
        }
      })
    }

• 스크롤이 이미지 높이의 반을 지났을 때, 이미지를 fade-in 하는 기능이다.
• window.scrollY + window.innerHeight는 현재 화면의 최하단이다.
• 여기에 img.height / 2를 빼주면, 최하단에서 이미지의 반정도 위이다. 즉 slideInAt이 된다.
• slideInAt이 img.offsetTop보다 클 때, 즉 현재 화면이 img.offsetTop에서 반 이상 내려갔을 때 이미지에 'active' 클래스를 넣어준다.

function debounce(fn, delay = 20) {
    let timer;
    return function () {
        clearTimeout(timer); //호출 될때마다 타이머 초기화
        timer = setTimeout(() => {
          console.log(arguments);
          fn.apply(this, arguments); //일정 시간 이후 호출
        }, delay);
    }
}

window.addEventListener('scroll', debounce(checkSlide));

• 스크롤 이벤트는 호출이 많기 때문에 debounce로 조절 해 주어야 한다.
• 참고

CSS 코드

.slide-in {
    opacity: 0;
    transition: all .5s;
}
.align-left.slide-in {
    transform: translateX(-30%) scale(0.95);
}

.align-right.slide-in {
    transform: translateX(30%) scale(0.95);
}
.slide-in.active {
    opacity: 1;
    transform: translateX(0%) scale(1);
}

• .slide-in에서 opacity 0으로 투명하게 만든다.
• .align-right, .align-left로 사진을 왼쪽, 오른쪽으로 30%이동 해 놓고 사이즈를 살짝 줄인다
• slide-in.active가 되면 투명도가 1로 변하고, 제자리로 돌아오면서, 사이즈가 1로 다시 돌아오게 된다.