HTML 스크롤 애니메이션

HTML의 구성요소를 고려해 복잡하게 만드는 예시도 있던데
이번에는 API를 이용해 비교적 간단하게 만들어보고자 한다
(스크롤 효과가 크게 중요하진 않으므로 ..)

new IntersectionObserver()
:

가 현재 화면에 보이는지 파악할 수 있도록 도와주는 함수

현재 화면에 나타나는 요소에 대해 나타날 때 불투명해지게, 사라질 때 투명해지게 바꾸는 코드를 작성하고자 한다

<script>
    let observer = new IntersectionObserver((e)=> {
        e.forEach((elem)=> {
            if(elem.isIntersecting) {
                elem.target.style.opacity=1;
                console.log(e);
            } else {
                elem.target.style.opacity=0;
            }
        })
    })
    let div = document.querySelectorAll('div')
    observer.observe(div[2]) //html 요소 감지
    observer.observe(div[3])
    observer.observe(div[4])
    observer.observe(div[5])
</script>

script 파트 안에 IntersectionObserver 함수를 구현하는 코드를 작성한다.
IntersectionObserver 함수를 observer 변수에 저장하고, 해당 함수를 통해 발생되는 요소를 'e'에 담았다.
해당 'e' 요소가 현재 화면에 비춰지고 있는지를 탐색해야 하므로 각 요소에 대해 isIntersecting 함수를 통해 true/false 값을 반환한다.
isIntersecting이 true면 해당 요소가 현재 화면에 나타나는 중이므로 (요소).target.style.opacity를 1로 바꾼다. (초기 opacity는 0으로 설정해뒀었다)
false인 경우라면 화면에 비춰지지 않는 중이므로 opacity를 다시 0으로 바꾼다.

현재 문서 안에서 div 내의 요소에 대해 observe 할 예정이므로 document.querySelectorAll('div')를 div 변수에 저장한다.
앞에서 만든 IntersectionObserver 함수를 통해 div 배열에 저장된 요소들의 observe 여부를 반환한다. (한 페이지 내에 div 요소가 여러개이므로 배열로 저장된다)

내 경우 observe가 필요한 부분보다 앞에 헤더 영역으로 div 요소가 두 개 있어서 div 배열의 2번째 인덱스부터 observe를 시작한다.

 	padding-bottom: 300px;
    margin-left: 20px;
    height: 400px;
    color: white;
    background-color: black;
    text-align: left;
    opacity: 0; /*투명도*/
    transition: all 0.3s; /*투명도 변경 시간 0.3초로 지정*/
    overflow: visible;
    font-size: 50px;

style.css 파일에 스크롤 애니메이션을 지정할 부분에 대한 스타일 형식을 작성한 코드이다.
초기 opacity는 0이며, opacity를 0에서 1로 변경하는 시간을 transition 변수로 0.3초로 설정했다.

처음에는 div 요소 순서 생각을 안하고 div[0]부터 observe했다가 하단 2개의 div가 보이지 않아서 왜 안보이지 .. 하고 고민하고 있었다. 헤더로 div 준 걸 까먹고..! 다양한 스타일을 지정해줄 수 있지만 오늘은 스크롤 시 투명도 조절만 구현해봤다.