Parallax Effect02

parallaxEffect02

패럴랙스 이펙트02번 - 사이드 메뉴 입니다. 상단의 메뉴바를 사이드 메뉴바로 바꿨습니다.

---

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

HTML

패럴랙스 1번과 크게 다르지 않습니다. 좌표값 표시 기능이 필요없으므로 info파트의 클래스 info 영역을 삭제했습니다.
nav영역의 id명을 parallax__nav에서 parallax__dot으로 변경하여줍니다.

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

JAVASCRIPT

사이드 메뉴바의 모든 a태그에 이벤트를 부여합니다.
(a태그를 클릭 했을 때 기본 이벤트를 중지시키고, href요소의 위치에 따라 부드럽게 스크롤이 이동하는 이벤트를 부여합니다.)
scrollTop값을 변수에 저장하고 출력하여줍니다.(현재 보이는 브라우저의 최상단 위치값 / 브라우저 호환성에 따라 사용)
scrollTop 값이 본문 각 요소의 Y축 최상단 값보다 크거나 같다면 해당 요소 위치의 li에 active 클래스가 추가 되도록 하였습니다.

document.querySelectorAll("#parallax__dot a").forEach(el => {
    el.addEventListener("click", e => {
        e.preventDefault();

        document.querySelector(el.getAttribute("href")).scrollIntoView({ behavior: "smooth" });
    });
});

window.addEventListener("scroll", () => {
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;

    document.querySelector("#parallax__info span").innerText = Math.floor(scrollTop);

    document.querySelectorAll(".content__item").forEach((el, i) => {
        if (scrollTop >= el.offsetTop - 10) {
            document.querySelectorAll("#parallax__dot li").forEach(li => {
                li.classList.remove("active");
            });
            document.querySelector("#parallax__dot li:nth-child(" + (i + 1) + ")").classList.add("active");
        }
    });
});


// window.scroll(0, 1000);  // scrollTop값 1000까지 이동
// window.scroll({ left: 0, top: 2000 });
// window.scroll({ left: 0, top: 2000, behavior: "smooth" });

// window.scrollTo(0, 1000);    // 절대 기준
// window.scrollTo({ left: 0, top: 2000 });
// window.scrollTo({ left: 0, top: 2000, behavior: "smooth" });

// window.scrollBy(0, 1000);   // 상대 기준(클릭 마다 1000씩 이동)
// window.scrollBy({ left: 0, top: 2000 });
// window.scrollBy({ left: 0, top: 2000, behavior: "smooth" });