getBoundingClientRect() Javascript 메서드 스크롤 효과 사용 방법(연습이 포함된 자습서)

안녕 친구들,
오늘은 아래로 스크롤할 때 커스텀 스크롤 효과를 사용하는 방법에 대해 알아보겠습니다.

AOS이라는 멋진 슬라이더가 있습니다.
하지만 우리는 바닐라 자바스크립트를 사용하여 페이지를 스크롤할 때 동일한 효과로 사용할 것입니다.

먼저 10개의 섹션을 추가합니다. emmetsection*10 대 코드

    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>

CSS

section {
            height: 300px;
            background: red;
            margin-bottom: .5rem;
            transition: .5s;
        }

그리고 자바스크립트

  let section = document.querySelectorAll('section')

        window.onscroll = (() => {
            section.forEach(function(v) {
                let rect = v.getBoundingClientRect();
                let y = rect.y;
                if (y > window.innerHeight) {
                    v.setAttribute('style', 'opacity: 0; transform: translateY(100%)');
                } else {
                    v.setAttribute('style', 'opacity: 1; transform: translateY(0%)');
                }
            })
        })

getBoundingClientRect() 메서드에는 다음과 같은 개체가 있습니다.

×

y

폭

높이

톱

바닥
우리는 y 코디네이션을 사용했으며 이 getBoundingClientRect()에 대한 자세한 내용은 몇 가지 유용한 링크를 따라갈 수 있습니다.

getBoundingClientRect() Js 메서드에 대해 자세히 알아보려면 몇 가지 유용한 링크 아래에 있습니다.

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

https://www.w3schools.com/JSREF/met_element_getboundingclientrect.asp

https://www.digitalocean.com/community/tutorials/js-getboundingclientrect

https://stackoverflow.com/questions/27745438/how-to-compute-getboundingclientrect-without-considering-transforms

고마워, 오늘은. 이 짧은 튜토리얼에 관심이 있으시면 댓글과 팔로우를 부탁드립니다.
안녕히 계세요