Parallax Effect01

parallaxEffect01

패럴랙스 이펙트01번 입니다. 스크롤 기준으로, 요소의 좌표값과 메뉴 버튼의 활성화 상태가 변경되도록 하였습니다.

---

원본 소스 보기 원본 사이트 보기

HTML

헤더와, 연결(nav), 콘텐츠, 사이드, 푸터 영역으로 나누었습니다.
nav 영역은 현재 스크롤 영역이 어디인지, 클릭하면 그 메뉴의 영역을 볼 수 있도록 구성하였습니다.
contents 영역은 이미지와 명언이 들어가는 본문 영역입니다.
사이드(info) 영역은 현재 스크롤 좌표, 각 메뉴 요소들의 세로 좌표값을 js코드를 통해 볼 수 있도록 하였습니다.

<nav id="parallax__nav">
    <ul>
        <li class="active"><a href="#section1">메뉴1</a></li>
        <li><a href="#section2">메뉴2</a></li>
        <li><a href="#section3">메뉴3</a></li>
        <li><a href="#section4">메뉴4</a></li>
        <li><a href="#section5">메뉴5</a></li>
        <li><a href="#section6">메뉴6</a></li>
        <li><a href="#section7">메뉴7</a></li>
        <li><a href="#section8">메뉴8</a></li>
        <li><a href="#section9">메뉴9</a></li>
    </ul>
</nav>
<!-- //parallax__nav -->

<main id="parallax__cont">
    <div id="contents">
        <section id="section1" class="content__item">
            <span class="content__item__num">01</span>
            <h2 class="content__item__title">section1</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">내일은 내일의 태양이 뜬다.</p>
        </section>
        <!-- //section1 -->

        <section id="section2" class="content__item">
            <span class="content__item__num">02</span>
            <h2 class="content__item__title">section2</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">삶이 있는 한 희망은 있다.</p>
        </section>
        <!-- //section2 -->

        <section id="section3" class="content__item">
            <span class="content__item__num">03</span>
            <h2 class="content__item__title">section3</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">먼저 자신을 비웃어라, 다른 사람이 당신을 비웃기 전에.</p>
        </section>
        <!-- //section3 -->

        <section id="section4" class="content__item">
            <span class="content__item__num">04</span>
            <h2 class="content__item__title">section4</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">평생 살 것처럼 꿈을 꾸어라, 그리고 내일 죽을 것처럼 오늘을 살아라.</p>
        </section>
        <!-- //section4 -->

        <section id="section5" class="content__item">
            <span class="content__item__num">05</span>
            <h2 class="content__item__title">section5</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">꿈을 계속 간직하고 있으면 반드시 실현할 때가 온다.</p>
        </section>
        <!-- //section5 -->

        <section id="section6" class="content__item">
            <span class="content__item__num">06</span>
            <h2 class="content__item__title">section6</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">고개 숙이지 마십시오. 세상을 똑바로 정면으로 바라보십시오.</p>
        </section>
        <!-- //section6 -->

        <section id="section7" class="content__item">
            <span class="content__item__num">07</span>
            <h2 class="content__item__title">section7</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">신을 내보여라, 그러면 재능이 드러날 것이다.</p>
        </section>
        <!-- //section7 -->

        <section id="section8" class="content__item">
            <span class="content__item__num">08</span>
            <h2 class="content__item__title">section8</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">최고에 도달하려면 최저에서 시작하라.</p>
        </section>
        <!-- //section8 -->

        <section id="section9" class="content__item">
            <span class="content__item__num">09</span>
            <h2 class="content__item__title">section9</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">인생을 다시 산다면 다음번에는 더 많은 실수를 저지르리라.</p>
        </section>
        <!-- //section9 -->
    </div>
</main>
<!-- //main -->

<aside id="parallax__info">
    <div class="scroll">scrollTop : <span>0</span>px</div>
    <div class="info">
        <ul>
            <li>#section1 offset() : <span class="offset1">0</span>px</li>
            <li>#section2 offset() : <span class="offset2">0</span>px</li>
            <li>#section3 offset() : <span class="offset3">0</span>px</li>
            <li>#section4 offset() : <span class="offset4">0</span>px</li>
            <li>#section5 offset() : <span class="offset5">0</span>px</li>
            <li>#section6 offset() : <span class="offset6">0</span>px</li>
            <li>#section7 offset() : <span class="offset7">0</span>px</li>
            <li>#section8 offset() : <span class="offset8">0</span>px</li>
            <li>#section9 offset() : <span class="offset9">0</span>px</li>
        </ul>
    </div>
</aside>
<!-- //parallax__info -->

JAVASCRIPT

1. 요소의 세로 스크롤 값을 구하기 위해 scroll 이벤트 함수를 선언합니다.
2. for문 or forEach문을 사용하여 스크롤 위치에 따른 메뉴의 활성화(active) 상태를 추가/제거합니다.
(scrollTop:브라우저의 최상단에서 스크롤 한 값이 .content__item 클래스 요소의 상단과의 거리 값의 이상이라면)
3. scroll span태그에 들어가는 scrollTop값이 반올림이 되도록 설정합니다.
3-1. for문을 사용하여 offsetN클래스들의 offsetTop값을 출력합니다.
4. 메뉴 이동이 부드러워지도록 클릭시 이벤트를 설정합니다.

window.addEventListener("scroll", () => {
    // let scrollTop = window.pageYOffset;
    // let scrollTop = window.scrollY;
    // let scrollTop = document.documentElement.scrollTop;
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;
    //브라우저 호환에 따라 셋 중 한가지가 사용되도록 함

    //for문
    // for (let i = 1; i <= 9; i++) {
    //     if (scrollTop >= document.getElementById("section" + i).offsetTop) {
    //         document.querySelectorAll("#parallax__nav li").forEach(li => {
    //             li.classList.remove("active");
    //         });
    //         document.querySelector("#parallax__nav li:nth-child(" + i + ")").classList.add("active")
    //     };
    // }

    //forEach문
    document.querySelectorAll(".content__item").forEach((el, i) => {
        if (scrollTop >= el.offsetTop - 2) {
            document.querySelectorAll("#parallax__nav li").forEach(li => {
                li.classList.remove("active");
            });
            document.querySelector("#parallax__nav li:nth-child(" + (i + 1) + ")").classList.add("active")
        }
    });
    //스크롤을 계속 감지하기 때문에 과부하가 걸릴 수 밖에 없습니다.

    //info
    document.querySelector(".scroll span").innerText = Math.round(scrollTop);

    for (let i = 1; i <= 9; i++) {
        document.querySelector(".offset" + i).innerText = document.getElementById("section" + i).offsetTop;
    }
});

//스크롤 이동
document.querySelectorAll("#parallax__nav li a").forEach(li => {
    li.addEventListener("click", (e) => {
        e.preventDefault();
        document.querySelector(li.getAttribute("href")).scrollIntoView({
            behavior: "smooth"
        });
    });
});

이미지 참고자료