Day 13 - Slide in on Scroll

이미지로 스크롤하면 슬라이드되어서 나오는 애니메이션을 추가하는 예제이다. 디바운스도 사용한다. (예전에 정리해놓길 잘했다, 정말 자주 써먹는다)

Debounce

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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);
  };
}

외부에 공개되어 있는 디바운스 함수 틀 중 하나이고 강의 제작자도 그 중 하나를 썼다고 한다. (개인적으로 Zerocho님의 디바운스 예제가 더 마음에 든다)

checkSlide() 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function checkSlide(e) {
  sliderImages.forEach((sliderImage) => {
    // half way through the image
    const slideInAt =
      window.scrollY + window.innerHeight - sliderImage.height / 2;
    // bottom of the image
    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");
    }
  });
}

이미지에 슬라이드 트랜지션을 추가할 지 말지 결정하는 핵심적인 코드이다. .active를 추가하면 트랜지션 효과가 나타나고, 제거하면 없어진다.

스크롤 값을 계산하는 부분이 가장 까다롭다. 우선 크게 계산하는 경우는 2가지인데, 이미지 위의 모서리가 보이는지, 이미지 아래의 모서리가 안보이는지 스크롤할 때 마다 디바운스로 호출하여 검사한다.

이제 윈도우 객체에 scroll 이벤트만 디바운스를 이용해서 걸어주면 끝이다.

1
window.addEventListener("scroll", debounce(checkSlide));

이 강의의 목적은 스크롤 값을 수학을 이용해서 계산하는 것보다는, 각 객체에 대해 적절한 상황에서 변수를 선언하여 조건을 검사하고 특정 메소드를 호출할 수 있는지라고 한다. (사실 이 말이 맞는게, 스크롤 값 계산이 어렵다면 그냥 구글에 스크롤 슬라이드 이미지 검색하면 널렸다)

이제 자바스크립트 30코스 절반이 다 되어간다. 바닐라JS로 모든 것을 할 수 있다는 말이 체감되고 있다.