13 - Slide in on Scroll (Javascript 30)

이번 파트는 많이 쓰이는 스크롤을 내리면 이미지가 날아오는 것을 구현하는 파트입니다.

 

1. slide-in 클래스를 가진 element들을 변수로 저장.

const sliderImages = document.querySelectorAll('.slide-in');

 

2.  이미지 슬라이드 체크 함수 구현.

function checkSlide() {
	sliderImages.forEach(sliderImage => {
	  // 이미지의 절반 계산
	  const slideIntAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
	  // 이미지의 하단 계산
	  const imageBottom = sliderImage.offsetTop + sliderImage.height;
	  // 이미지의 절반을 계산한 값이 각 이미지의 상단 위치를 넘어섰을때.
	  const isHalfShown = slideIntAt > sliderImage.offsetTop;
	  // 현재 스크롤된 위치가 이미지의 하단 좌표보다 값이 작은경우.
	  const isNotScrolledPast = window.scrollY < imageBottom;

	  if (isHalfShown && isNotScrolledPast) {
		sliderImage.classList.add('active');  // 이미지 활성화
	  } else {
		sliderImage.classList.remove('active'); // 이미지 비활성화
	  }
	});
}

 

3. 스크롤 이벤트 추가.

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

 

4. 추가

이미지가 너무 빨리 슬라이드되어서 좀더 보기좋게 느리게 만들었습니다.

.slide-in {
	opacity: 0;
	transition: all 1.5s;
}

transition을 기존 .5s 에서 1.5s로 변경하면 트랜지션이 1.5초동안 이루어지면서 좀더 스무스하게 움직이는 모습을 볼 수 있습니다.

---

debounce가 하는 역할은 스크롤이 되는것을 얼마나 자주 식별할것인지 말고는 잘 모르겠습니다.

좀더 공부해야겠네요

스크롤 이벤트 추가할때 아래와 같이 구현하셔도 똑같이 동작합니다.

window.addEventListener('scroll', checkSlide);