13. Slide in on scroll ( JavaScript30 )

Dev/JavaScript30

13. Slide in on scroll ( JavaScript30 )

takeU 2021. 7. 9. 11:33

Slide in on scroll

목표

스크롤이 이미지 자리의 중간까지 오면 이미지가 양옆에서 날아오는 효과를 적용하려 함

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

  <div class="site-wrap">

    <h1>Slide in on Scroll</h1>
    <img src="http://unsplash.it/400/400" class="align-left slide-in">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet <img src="http://unsplash.it/200/200" class="align-right slide-in"> temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis</p>
  </div>
    <script>
    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);
        };
    }

  </script>
</body>
</html>

기본 코드의 내용이 너무 길어 필요한 내용만 남기고 지웠음
script 코드에서 debounce 함수는 스크롤을 할 때 변경 사항을 감지하는 시간을 늘려줘,
쓸데없이 변화를 자주 감지하지 않도록 해줌.
CSS까지 적용해야 완성된 효과를 볼 수 있음.

과정

이미지 태그 선택
이미지를 날아오게 할 함수 생성
함수 호출

코드 분석

1. 이미지 태그 선택

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

.slide-in 클래스를 가진 요소들을 선택

2. 이미지를 날아오게 할 함수 생성

const 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');
    }
    });
}

checkSlide함수로 이미지가 날아오는 기준을 정의해줌
slideInAt는 현재 뷰포트의 세로길이와 스크롤한 길이의 합에서 이미지 길이의 절반을 뺀 값이다
imageBottom은 이미지의 최상단 위치 좌표에 이미지 높이를 더한 값, 즉 이름대로 이미지의 최하단의 값이다
isHalfShown은 slideInAt이 이미지의 최상단 좌표값보다 클 때 참
inNotScrolledPast는 스크롤한게 imageBottom보다 작을 때 참
조건문 안은 위에 설정한 두 부등식이 둘다 참일 때 active 클래스를 더해 이미지가 나오고,
거짓이면 active 클래스를 삭제함
즉 이미지의 중간부터 맨 아랫부분 사이에 스크롤을 할 때 이미지가 나오고, 사라진다

3. 함수 호출

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

스크롤을 할 때 debounce(checkSlide) 함수가 실행되도록 함

저작자표시 비영리 변경금지

현재글13. Slide in on scroll ( JavaScript30 )

takeU