Parallax Scrolling 패럴랙스 스크롤링 01 : 상단 메뉴 active & 부드럽게 이동되는 효과

⭐️ Parallax Scrolling 패럴랙스 스크롤링 01 : 상단 메뉴 active & 부드럽게 이동되는 효과 ⭐️

01. Parallax Scrolling

패럴랙스(Parallax)란 '시차'를 뜻하는 단어로, 멀리 있는 물체는 천천히 움직이고 가까이 있는 물체는 빠르게 움직이는 현상을 의미합니다.
패럴랙스 스크롤링 (Parallax Scrolling) 기술은 배경 또는 오브젝트의 레이어화, 스크롤과 애니메이션의 속도 조절을 통해 깊이에 대한 착시를 보여주는 기술 입니다.
이 기술은 한 페이지로 구성할 수 있으며, 시각적인 몰입감을 주고 효과적인 스토리텔링을 가능하게 하는 장점이 있습니다.
다만 내용이 너무 길 경우에는 사용자가 지루함이나 불편함을 느낄 수 있고, 화면 구성이 복잡해지며 많은 리소스로 인해 로딩 속도가 느릴 수 있습니다.

02. 패럴랙스 스크롤링 만들어보기 : 목표

🧊 스크롤하여 화면을 움직이면, 화면 상의 위치에 따라 메뉴바의 active 효과가 전환되도록 설정합니다.
🧊 메뉴바를 눌러 각 섹션의 내용이 있는 위치로 이동하게 될 때, 화면이 부드럽게 이동되는 효과를 보여줍니다.

[1] 메뉴바 만들기 (html)

1) 시멘틱 구조를 위해 nav 태그를 만들고, 그 안에 자식 태그로 ul 과 li 태그를 이용해 메뉴바 목록을 작성합니다.
2) 메뉴바를 눌렀을 때 이동이 되도록 a 태그로 링크를 걸어주고, class 로 active 를 '메뉴1'에 입력합니다.

   ___ 참고하기 ___
  `1   a href 에 class ="클래스값" 또는 id ="아이디값" 을 넣어주면 링크 이동이 가능합니다.

<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>

[2] 메뉴바 디자인하기 (css)

브라우저 화면에 어떻게 보여지는지 계속 확인하면서 디자인합니다.

#parallax__nav {
    position: fixed;    /* 오른쪽 위에 고정해서 띄워놓기위해 */
    right: 20px;        /* 고정해 둘 위치 : 오른쪽 간격 설정 */
    top: 20px;          /* 고정해 둘 위치 : 윗쪽 간격 설정 */
    z-index: 2000;      /* 메뉴바를 눌러서 작동해야 하므로, 레이아웃의 맨 윗쪽(표면)에 위치시킴 */
    background-color: rgba(0, 0, 0, 0.4);       /* rgba : 투명색 지정 */
    padding: 20px 30px;     /* 안쪽 여백 : 상하 좌우 */
    border-radius: 50px;    /* 테두리 곡률 */
}

#parallax__nav li {
    display: inline;    /* 요소가 표시되는 영역만큼만 공간을 갖도록 배치 */
    margin: 0 5px;      /* 바깥 여백 : 상하 좌우 */
}

#parallax__nav li a {
    display: inline-block;  /* 요소가 표시되는 영역만큼만 공간을 차지하면서 크기와 여백 설정이 가능하도록 배치 */
    /* width: 30px; 임시로 준 값, css 설정하며 브라우저 화면 확인 후 지웁니다. */
    height: 30px;
    padding: 5px 20px;
    text-align: center;     /* 텍스트 중앙 정렬 */
    line-height: 30px;      /* 줄간격 : 기준 높이 */
}

#parallax__nav li.active a {
    background: #fff;       /* background 옵션을 지정해서 사용할 때 (color, image, repeat, attachment, position 등) 여기서는 배경색 */
    color: #000;            /* 글자색 */
    border-radius: 20px;
    box-sizing: content-box;    /* content-box; 너비로 지정된 값을 content 너비로 적용시킴   border-box; 너비로 지정한 값을 실제 너비로 적용시킴 */
}

[3] 내용 구조 짜기 (html)

1) main 태그 > div (contents) > section > [ span (메뉴 번호) | h2 (메뉴 이름) | { figure > div (이미지) } | p (내용 글) ] * 9 (메뉴 갯수)
2) css 와 script 의 경로 설정을 위해, id 와 class 로 이름을 정합니다.

<main id="parallax__cont">
    <div id="contents">
        <section id="section1" class="contents__item">
            <span class="contents__item__num">01</span>
            <h2 class="contents__item_title">section1</h2>
            <figure class="contents__item__imgWrap">
                <div class="contents__item__img"></div>
            </figure>
            <p class="contents__item__desc">내용 글 1</p>
        </section>
        <!-- //section1 -->

        <section id="section2" class="contents__item">
            <span class="contents__item__num">02</span>
            <h2 class="contents__item_title">section2</h2>
            <figure class="contents__item__imgWrap">
                <div class="contents__item__img"></div>
            </figure>
            <p class="contents__item__desc">내용 글 2</p>
        </section>
        <!-- //section2 -->

        <section id="section3" class="contents__item">
            <span class="contents__item__num">03</span>
            <h2 class="contents__item_title">section3</h2>
            <figure class="contents__item__imgWrap">
                <div class="contents__item__img"></div>
            </figure>
            <p class="contents__item__desc">내용 글 3</p>
        </section>
        <!-- //section3 -->

        <section id="section4" class="contents__item">
            <span class="contents__item__num">04</span>
            <h2 class="contents__item_title">section4</h2>
            <figure class="contents__item__imgWrap">
                <div class="contents__item__img"></div>
            </figure>
            <p class="contents__item__desc">내용 글 4</p>
        </section>
        <!-- //section4 -->

        <section id="section5" class="contents__item">
            <span class="contents__item__num">05</span>
            <h2 class="contents__item_title">section5</h2>
            <figure class="contents__item__imgWrap">
                <div class="contents__item__img"></div>
            </figure>
            <p class="contents__item__desc">내용 글 5</p>
        </section>
        <!-- //section5 -->

        <section id="section6" class="contents__item">
            <span class="contents__item__num">06</span>
            <h2 class="contents__item_title">section6</h2>
            <figure class="contents__item__imgWrap">
                <div class="contents__item__img"></div>
            </figure>
            <p class="contents__item__desc">내용 글 6</p>
        </section>
        <!-- //section6 -->

        <section id="section7" class="contents__item">
            <span class="contents__item__num">07</span>
            <h2 class="contents__item_title">section7</h2>
            <figure class="contents__item__imgWrap">
                <div class="contents__item__img"></div>
            </figure>
            <p class="contents__item__desc">내용 글 7</p>
        </section>
        <!-- //section7 -->

        <section id="section8" class="contents__item">
            <span class="contents__item__num">08</span>
            <h2 class="contents__item_title">section8</h2>
            <figure class="contents__item__imgWrap">
                <div class="contents__item__img"></div>
            </figure>
            <p class="contents__item__desc">내용 글 8</p>
        </section>
        <!-- //section8 -->

        <section id="section9" class="contents__item">
            <span class="contents__item__num">09</span>
            <h2 class="contents__item_title">section9</h2>
            <figure class="contents__item__imgWrap">
                <div class="contents__item__img"></div>
            </figure>
            <p class="contents__item__desc">내용 글 9</p>
        </section>
        <!-- //section9 -->
    </div>
</main>
<!-- //main -->

[4] 내용 구조 디자인하기 (css)

브라우저 화면에 어떻게 보여지는지 계속 확인하면서 디자인합니다.

.contents__item {
    width: 1000px;          /* section 이 차지할 너비 설정 */
    max-width: 70vw;        /* vw : 뷰포트의 비율로 */
    margin: 30vw auto;
    /* background-color: rgba(255, 255, 255, 0.1);   임시로 준 값, css 설정하며 브라우저 화면 확인 후 지웁니다. */
    text-align: left;       /* 텍스트 왼쪽 정렬 */
    margin-right: 0;
    position: relative;     /* contents__item__num 의 position 에 대한 기준점 설정 (정하지 않으면 기본 기준점인 브라우저 왼쪽 맨 위에 모두 겹쳐짐) */
    padding-top: 9vw;
}

.contents__item:nth-child(even) {       /* : 의 자식 child( ~ 번째 ) -> 2n : 2의 배수, 2n+1 : 3의 배수, even : 짝수, odd : 홀수 */
    margin-left: 0;
    text-align: right;     /* 텍스트 오른쪽 정렬 */
}

.contents__item__num {
    font-size: 35vw;        /* 글자 크기 */
    font-family: 'Lato';    /* 글자체 */
    font-weight: 100;       /* 글자 두께 */
    position: absolute;     /* 숫자가 이미지와 겹치도록 위치를 설정해줌; 부모 영역을 기준으로 설정되어야 함 -> relative 설정 */
    left: -6vw;             /* 위치 설정 : 왼쪽 간격 설정 */
    top: -13vw;             /* 위치 설정 : 윗쪽 간격 설정 */
    opacity: 0.07;          /* 투명도 */
    z-index: -2;            /* 레이아웃에서 겹쳐진 숫자가 이미지 아래(뒤)에 위치하도록 */
}

.contents__item:nth-child(even) .contents__item__num {
    left: auto;     /* left 값 초기화; 기준점이 right 로 바뀜 */
    right: -8vw;    /* 위치 설정 : 오른쪽 간격 설정 */
}

.contents__item_title {
    font-weight: 400;
    text-transform: capitalize;     /* 단어의 첫번째 글자를 대문자로 바꿔줌; section -> Section */
}

.contents__item__imgWrap {
    width: 100%;
    padding-bottom: 56.25%;     /* 가상으로 이미지 영역을 만들어줌 -> 이미지를 출력할 수 있음 */
    background: #000;
    position: relative;     /* contents__item__img 의 position 에 대한 기준점 설정 */
    overflow: hidden;       /* 이미지가 영역 밖으로 넘쳐 나가는 것을 막아줌 */
    z-index: -1;
}

.contents__item__img {
    background-repeat: no-repeat;           /* 기본으로 설정된 이미지 반복 채움을 해제 */
    background-position: center center;     /* 이미지가 정 가운데에 위치하도록 지정 ex) left top, right center, center bottom 등 */
    background-size: cover;                 /* 요소의 크기에 맞춰서 이미지가 덮이도록 이미지 크기 설정 */
    width: 110%;
    height: 110%;
    position: absolute;     /* 위치를 설정해줌; 부모 영역을 기준으로 설정되어야 함 -> relative 설정 */
    left: -5%;
    top: -5%;
    filter: saturate(0%);   /* 이미지 필터 : 흑백 (0% 흑백, 50% 흑백 반 색깔 반) */
    transition: all 1s;
}

/* 각 섹션에 이미지로 배경 넣기 */
.contents__item:nth-child(1) .contents__item__img {     /* contents__item 의 첫번째 자식 contents__item__img 에게 이미지를 넣어라 */
    background-image: url(../assets/img/parallax01.jpg);
}

.contents__item:nth-child(2) .contents__item__img {
    background-image: url(../assets/img/parallax02.jpg);
}

.contents__item:nth-child(3) .contents__item__img {
    background-image: url(../assets/img/parallax03.jpg);
}

.contents__item:nth-child(4) .contents__item__img {
    background-image: url(../assets/img/parallax04.jpg);
}

.contents__item:nth-child(5) .contents__item__img {
    background-image: url(../assets/img/parallax05.jpg);
}

.contents__item:nth-child(6) .contents__item__img {
    background-image: url(../assets/img/parallax06.jpg);
}

.contents__item:nth-child(7) .contents__item__img {
    background-image: url(../assets/img/parallax07.jpg);
}

.contents__item:nth-child(8) .contents__item__img {
    background-image: url(../assets/img/parallax08.jpg);
}

.contents__item:nth-child(9) .contents__item__img {
    background-image: url(../assets/img/parallax09.jpg);
}

.contents__item__desc {
    font-size: 2vw;
    font-weight: 600;
    color: 	#FFFFF0;
    text-shadow: 1px 1px 1px #222;      /* 텍스트 그림자 효과 : 가로px, 세로px, 번짐 정도, 색깔 -> 이와 같은 속성 값을 쉼표로 구분하여 여러 개 입력하면 여러 개의 그림자가 생김*/
    line-height: 1.4;
    margin-top: -2vw;
    margin-left: -5vw;
    word-break: keep-all;       /* 어절 단위로 끊어지며 줄바꿈이 되도록 설정 */
}

.contents__item:nth-child(even) .contents__item__desc {
    margin-left: auto;      /* 왼쪽 바깥 여백 초기화; 기준점이 오른쪽 바깥 여백으로 바뀜 */
    margin-right: -4vw;
}

[5] 위치값 확인칸 만들기 (html)

1) 시멘틱 구조를 위해 aside 태그를 만들고, 그 안에 자식 태그로 div 및 ul 과 li 태그를 이용해 위치값 목록을 작성합니다.
2) css 와 script 의 경로 설정을 위해, id 와 class 로 이름을 정합니다.

<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>

[6] 위치 확인칸 디자인하기 (css)

브라우저 화면에 어떻게 보여지는지 계속 확인하면서 디자인합니다.

#parallax__info {
    position: fixed;        /* 왼쪽 아래에 고정시킴 */
    left: 20px;
    bottom: 20px;
    z-index: 2000;          /* 가려지지 않도록 맨 윗쪽(표면)에 위치시킴 */
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    padding: 20px;
    border-radius: 10px;
}

#parallax__info li, .scroll {
    line-height: 1.4;           /* parallax__info li 와 .scroll 의 내용 글자에 대한 줄간격 설정 */
}

# 작동의 원리 생각하기

scrollTop 의 값이 각 section 의 Y축 값보다 크거나 같을 때, 메뉴의 active 가 다음 section 으로 옮겨져야 합니다.

[7] 변하는 값 계산하여 출력하기 (script)

1) 값을 어떻게 가져와야 할지 생각해보고, 계산 방법을 구상해봅니다.
2) 값을 가져오는 방법, 계산 방법을 다양하게 생각해보고 여러 가지로 출력해봅시다.

// parallax__info 에 들어가는 값 출력하기

// 계산 조건과 식 입력

window.addEventListener("scroll", () => {           // 브라우저를 스크롤 했을 때,
    // let scrollTop = window.pageYOffset;                      // 3가지 식은
    // let scrollTop = window.scrollY;                          // 모두 같은 값을 가진다.
    // let scrollTop = document.documentElement.scrollTop;      // 브라우저에서 지원하는 것이 다를 수 있기 때문에, 아래와 같이 합쳐서 표현함

    // scrollTop 변수 안에 브라우저 기준의 세로 스크롤 값을 저장하시오.  |또는|
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;

    // 그리고 scrollTop 값을 parallax__info .scroll span 안에 출력하시오.
    document.querySelector("#parallax__info .scroll span").innerText = Math.round(scrollTop);       // 소수점; 내림 Math.floor( ), 올림 Math.ceil( ), 반올림 Math.round( )
    // script 맨 위쪽에   const scroll = document.querySelector("#parallax__info .scroll span");    이렇게 scroll 상수 설정 후,
    // scroll.innerText = Math.round(scrollTop);    이렇게 입력해도 출력됨



    // offset 값 출력하기  01. 일일이 하나씩 불러오는 방법

    // 요소 offset$ 안에 출력하시오 = 아이디(section$)요소의 Y축 값(문서 기준)을
    // document.querySelector(".offset1").innerText = document.getElementById("section1").offsetTop;
    // document.querySelector(".offset2").innerText = document.getElementById("section2").offsetTop;
    // document.querySelector(".offset3").innerText = document.getElementById("section3").offsetTop;
    // document.querySelector(".offset4").innerText = document.getElementById("section4").offsetTop;
    // document.querySelector(".offset5").innerText = document.getElementById("section5").offsetTop;
    // document.querySelector(".offset6").innerText = document.getElementById("section6").offsetTop;
    // document.querySelector(".offset7").innerText = document.getElementById("section7").offsetTop;
    // document.querySelector(".offset8").innerText = document.getElementById("section8").offsetTop;
    // document.querySelector(".offset9").innerText = document.getElementById("section9").offsetTop;



    // offset 값 출력하기  02. for문으로 불러오는 방법

    // i 가 1부터 9까지 증가할 때,
    for (let i=1; i<=9; i++) {
        document.querySelector(".offset" + i).innerText = document.getElementById("section" + i).offsetTop;
    }   // 요소 (offset + i) 안에 출력하시오. = 아이디 (section + i) 요소의 Y축 값(문서 기준)을





    // 메뉴 버튼을 눌렀을 때, 부드럽게 이동하는 효과 주기

    document.querySelectorAll("#parallax__nav li a").forEach( li => {        // 모든 parallax__nav li a 에 대해서,
        li.addEventListener("click", (e) => {       // 메뉴의 링크 버튼을 클릭했을 때,
            e.preventDefault();                     // 링크 이동 또는 새로고침 막아주기 
            document.querySelector(li.getAttribute("href")).scrollIntoView({        // li의 속성 href 를 불러올 때. 스크롤 이동을 설정함
                behavior: "smooth"                  // 부드럽게 스크롤되어 넘어가도록 (ex. 메뉴1에서 메뉴5를 누르면, section1 ~ section5 순서를 거쳐서 이동함)
            });
        });
    });



    // 스크롤 내릴 때, 화면에 보여지는 section$ 의 Y축 위치에 따라 메뉴$ 에 active 효과 주기

    //  active 효과 출력하기  01. 일일이 하나씩 불러오는 방법

    // if (만약 ~ 이면)
    // if(scrollTop >= document.getElementById("section1").offsetTop){              // scrollTop 의 값이 section1 요소의 Y축 값 보다 크거나 같다면,
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {           // parallax__nav li 의 클래스에 있는 active룰 제거하고
    //         li.classList.remove("active");
    //     });
    //     document.querySelector("#parallax__nav li:nth-child(1)").classList.add("active");        // parallax__nav 첫번째 li 의 클래스에 active룰 추가하시오.
    // };

    // if(scrollTop >= document.getElementById("section2").offsetTop){              // scrollTop 의 값이 section2 요소의 Y축 값 보다 크거나 같다면,
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {           // parallax__nav li 의 클래스에 있는 active룰 제거하고
    //         li.classList.remove("active");
    //     });
    //     document.querySelector("#parallax__nav li:nth-child(2)").classList.add("active");        // parallax__nav 두번째 li 의 클래스에 active룰 추가하시오.
    // };

    // if(scrollTop >= document.getElementById("section3").offsetTop){              // scrollTop 의 값이 section3 요소의 Y축 값 보다 크거나 같다면,
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {           // parallax__nav li 의 클래스에 있는 active룰 제거하고
    //         li.classList.remove("active");
    //     });
    //     document.querySelector("#parallax__nav li:nth-child(3)").classList.add("active");        // parallax__nav 세번째 li 의 클래스에 active룰 추가하시오.
    // };

    // if(scrollTop >= document.getElementById("section4").offsetTop){              // scrollTop 의 값이 section4 요소의 Y축 값 보다 크거나 같다면,
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {           // parallax__nav li 의 클래스에 있는 active룰 제거하고
    //         li.classList.remove("active");
    //     });
    //     document.querySelector("#parallax__nav li:nth-child(4)").classList.add("active");        // parallax__nav 네번째 li 의 클래스에 active룰 추가하시오.
    // };

    // if(scrollTop >= document.getElementById("section5").offsetTop){              // scrollTop 의 값이 section5 요소의 Y축 값 보다 크거나 같다면,
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {           // parallax__nav li 의 클래스에 있는 active룰 제거하고
    //         li.classList.remove("active");
    //     });
    //     document.querySelector("#parallax__nav li:nth-child(5)").classList.add("active");        // parallax__nav 다섯번째 li 의 클래스에 active룰 추가하시오.
    // };

    // if(scrollTop >= document.getElementById("section6").offsetTop){              // scrollTop 의 값이 section6 요소의 Y축 값 보다 크거나 같다면,
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {           // parallax__nav li 의 클래스에 있는 active룰 제거하고
    //         li.classList.remove("active");
    //     });
    //     document.querySelector("#parallax__nav li:nth-child(6)").classList.add("active");        // parallax__nav 여섯번째 li 의 클래스에 active룰 추가하시오.
    // };

    // if(scrollTop >= document.getElementById("section7").offsetTop){              // scrollTop 의 값이 section7 요소의 Y축 값 보다 크거나 같다면,
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {           // parallax__nav li 의 클래스에 있는 active룰 제거하고
    //         li.classList.remove("active");
    //     });
    //     document.querySelector("#parallax__nav li:nth-child(7)").classList.add("active");        // parallax__nav 일곱번째 li 의 클래스에 active룰 추가하시오.
    // };

    // if(scrollTop >= document.getElementById("section8").offsetTop){              // scrollTop 의 값이 section8 요소의 Y축 값 보다 크거나 같다면,
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {           // parallax__nav li 의 클래스에 있는 active룰 제거하고
    //         li.classList.remove("active");
    //     });
    //     document.querySelector("#parallax__nav li:nth-child(8)").classList.add("active");        // parallax__nav 여덟번째 li 의 클래스에 active룰 추가하시오.
    // };

    // if(scrollTop >= document.getElementById("section9").offsetTop){              // scrollTop 의 값이 section9 요소의 Y축 값 보다 크거나 같다면,
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {           // parallax__nav li 의 클래스에 있는 active룰 제거하고
    //         li.classList.remove("active");
    //     });
    //     document.querySelector("#parallax__nav li:nth-child(9)").classList.add("active");        // parallax__nav 아홉번째 li 의 클래스에 active룰 추가하시오.
    // };



    //  active 효과 출력하기  02. for문으로 불러오는 방법;  for문 안에 첫번째 방법 넣어주기

    // i 가 1부터 9까지 증가할 때,
    // for( let i=1; i<=9; i++){
    //     if(scrollTop >= document.getElementById("section" +i).offsetTop){    // scrollTop 의 값이 (section +i) 요소의 Y축 값 보다 크거나 같다면,
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {       // 모든 parallax__nav li 에 대하여,
    //         li.classList.remove("active");                                   // li 의 클래스에 있는 active룰 제거하고
    //     });
    //     document.querySelector("#parallax__nav li:nth-child(" + i + ")").classList.add("active");    // parallax__nav li 의 i 번째 li 의 클래스에 active룰 추가하시오.
    //     };
    // }



    //  active 효과 출력하기  03. forEach 으로 불러오는 방법

    // .contents__item(section 영역)에서의 요소값, 위치값 중에서
    document.querySelectorAll(".contents__item").forEach((element, index) => {

        // scrollTop 의 값이 요소값의 Y축 값보다 크다면,
        if(scrollTop >= element.offsetTop -2){      // 오차가 생기므로 오차에 의한 오류를 막기 위해서 ( - 아무 숫자든 상관 없음)

            document.querySelectorAll("#parallax__nav li").forEach(li => {      // 모든 parallax__nav li 에 대하여,
                li.classList.remove("active");                                  // li 의 클래스에 있는 active룰 제거하고
            });

            // parallax__nav li 의 (index +1)번째 li 의 클래스에 active룰 추가하시오.
            document.querySelector("#parallax__nav li:nth-child(" + ( index + 1 ) + ")").classList.add("active");
            };                                              // index 가 0부터 시작하므로 +1 해줌 (그래야 마지막 영역까지 포함됨)
    });
});

03. 결과보기

☛ 원본 소스 보기