Day13-Slide in on Scroll

CODE

구현 사항: 스크롤 시 이미지 자동 slide-in

1) "slide-in" 클래스 (본문 내 이미지들)을 querySelectorAll하여 slideImages라는 변수에 할당

const slideImages = document.querySelectorAll(".slide-in");

2) checkSlide() 함수 선언한 뒤 slideImages를 forEach()를 사용하여 순회

function checkSlide() {
  slideImages.forEach((image) => {});
}

3) 이미지에 "active" 클래스를 추가하는 조건

• 이미지가 반 이상 보여야 하며 (이미지의 반 이상이 viewport 내에 들어와야 함)
• 스크롤을 내려 이미지가 viewport에서 사라지지 않은 상태여야 함
  따라서 이미지가 반 이상 보였는지 여부를 저장할 변수 isHalfShown과 이미지가 viewport에서 사라졌는지 여부를 저장할 변수 isScrolledPast를 선언

function checkSlide() {
  slideImages.forEach((image) => {
    const isHalfShown;
    const isScrolledPast;
  });
}

4) isHalfShown에 viewport 하단의 절대 좌표(Y)인 window.scrollY + window.innerHeight > image.offsetTop + image.height / 2를 할당하여 viewport 내에 이미지가 반 이상이 보이면 true를, 아니면 false가 변수에 할당되도록 함

function checkSlide() {
  slideImages.forEach((image) => {
    const isHalfShown =
      window.scrollY + window.innerHeight >
      image.offsetTop + image.height / 2;
  });
}

5) isScrolledPast에 window.scrollY > image.offsetTop + image.height를 할당하여 이미지가 viewport에서 사라졌는지 여부를 판단

function checkSlide() {
  slideImages.forEach((image) => {
    const isHalfShown =
      window.scrollY + window.innerHeight >
      image.offsetTop + image.height / 2;
    const isScrolledPast =
      window.scrollY > image.offsetTop + image.height;
  });
}

• 참고 이미지
  

6) 만약 isHalfShown이 true이며 isScrolledPast가 false이면 image의 classList에 "active"를 추가하여 이미지가 slide-in 되도록 하며, 해당 조건이 만족되지 않는 경우 "active"를 제거

function checkSlide() {
  slideImages.forEach((image) => {
    const isHalfShown =
      window.scrollY + window.innerHeight >
      image.offsetTop + image.height / 2;
    const isScrolledPast =
      window.scrollY > image.offsetTop + image.height;
    if (isHalfShown && !isScrolledPast) {
      image.classList.add("active");
    } else {
      image.classList.remove("active");
    }
  });
}

7) scroll 이벤트 발생 시 checkSlide() 함수가 debounce 되어 실행되도록 함

function checkSlide() {
  slideImages.forEach((image) => {
    const isHalfShown =
      window.scrollY + window.innerHeight >
      image.offsetTop + image.height / 2;
    const isScrolledPast =
      window.scrollY > image.offsetTop + image.height;
    if (isHalfShown && !isScrolledPast) {
      image.classList.add("active");
    } else {
      image.classList.remove("active");
    }
  });
}
window.addEventListener("scroll", debounce(checkSlide));