scroll event

scroll을 내렸을 때 점점 숨어있던 부분 등장

---

HTML

<h1>Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
        Quasi nam ea voluptatem recusandae vero. Unde quibusdam dignissimos neque, at suscip
        it molestias dicta, aperiam possimus quo ullam beatae, tempore vero magni.
    </h1>
    <h1>Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
        Quasi nam ea voluptatem recusandae vero. Unde quibusdam dignissimos neque, at suscip
        it molestias dicta, aperiam possimus quo ullam beatae, tempore vero magni.
    </h1>
    <h1>Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
        Quasi nam ea voluptatem recusandae vero. Unde quibusdam dignissimos neque, at suscip
        it molestias dicta, aperiam possimus quo ullam beatae, tempore vero magni.
    </h1>
    <h1 class="el opacity-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
        Quasi nam ea voluptatem recusandae vero. Unde quibusdam dignissimos neque, at suscip
        it molestias dicta, aperiam possimus quo ullam beatae, tempore vero magni.
    </h1>
    <h1 class="el opacity-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
        Quasi nam ea voluptatem recusandae vero. Unde quibusdam dignissimos neque, at suscip
        it molestias dicta, aperiam possimus quo ullam beatae, tempore vero magni.
    </h1>
    <h1 class="el opacity-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
        Quasi nam ea voluptatem recusandae vero. Unde quibusdam dignissimos neque, at suscip
        it molestias dicta, aperiam possimus quo ullam beatae, tempore vero magni.
    </h1>

CSS

<style>
        .el {
            transition: opacity 0.5s;
        }
        .opacity-0 {
            opacity: 0;
        }

</style>

JS

<script>
        var els = document.getElementsByClassName('el');

        console.log(els)

        window.addEventListener('scroll', (e) => {
            var viewPortHeight = window.innerHeight;

            for (var i=0; i<els.length; i++) {
                // viewport의 top, element의 top 사이의 거리
                var y = els[i].getBoundingClientRect().y;

                // viewport에 내용이 꽉 찼을 경우
                if (y < viewPortHeight - 100) {
                    els[i].classList.remove('opacity-0');
                }
            }
        })
</script>

getBoundingClientRect()

Element.getBoundingClientRect() 메서드는 엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DOMRect 객체를 반환합니다.

• left: 뷰포트의 왼쪽에서 요소의 왼쪽 부분까지의 거리
• top: 뷰포트의 위쪽에서 요소의 위쪽 까지의 거리
• right: 뷰포트의 오른쪽와 요소의 오른쪽 사이 거리
• bottom: 뷰포트의 아래쪽과 요소의 아래쪽 거리
• width: pixel 단위의 요소의 가로 크기
• height: pixel 단위 요소의 세로 크기