패럴랙스 이펙트02

패럴랙스 이펙트 2

이번 패럴랙스 이펙트는 스크롤이 내려감에 따라, 사이드 메뉴의 점 모양에 변화가 생기는 효과입니다. 화면이 섹션에 들어가게 되면, 해당 섹션의 점이 활성상태가 됩니다. 또한, 점을 클릭하면 해당하는 섹션으로 스크롤을 이동할 수 있습니다.

HTML 코드

이번 패럴랙스 이펙트의 핵심이 되는 HTML의 부분입니다. 메뉴 글씨는 안보이게 처리하고, 점으로 표현하기 위해, 글씨는 span 태그로 감싸주었습니다.

HTML 보기

<nav id="parallax__dot">
    <ul>
        <li class="active"><a href="#section01"><span>메뉴1</span></a></li>
        <li><a href="#section02"><span>메뉴2</span></a></li>
        <li><a href="#section03"><span>메뉴3</span></a></li>
        <li><a href="#section04"><span>메뉴4</span></a></li>
        <li><a href="#section05"><span>메뉴5</span></a></li>
        <li><a href="#section06"><span>메뉴6</span></a></li>
        <li><a href="#section07"><span>메뉴7</span></a></li>
        <li><a href="#section08"><span>메뉴8</span></a></li>
        <li><a href="#section09"><span>메뉴9</span></a></li>
    </ul>
</nav>

스크립트 요약

1. 메뉴를 클릭했을 때 해당 섹션으로 이동하기 위해 기본 클릭 이벤트 효과를 없애주고, 스크롤 이동 스크립트를 작성합니다. 2. 스크롤 이벤트를 발생시키고 현재의 스크롤 값을 불러옵니다. 3. 스크롤 값에 따라 해당 섹션의 메뉴를 활성화 합니다.

전체 스크립트 보기

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((e, i) => {
        if(scrollTop >= e.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");
        }
    });
});

스크립트 뜯어보기

스크립트를 차근차근 뜯어보며 이해해 봅시다!

> 섹션 이동 스크립트 작성 01
: 메뉴의 a태그인 점을 querySelectorAll을 이용해 모두 선택하여 forEach문을 작성합니다. 여기서 el은 각각의 점을 의미합니다.

✔ forEach문으로 작성하는 이유
점이 하나가 아닌 여러개이며, 각각의 점에 해당하는 실행문을 실행하기 위함입니다.
forEach문은 요소의 갯수만큼 반복실행되어 각 요소가 실행문을 한번씩 실행할 수 있도록합니다.

document.querySelectorAll("#parallax__dot a").forEach(el => {});

> 섹션 이동 스크립트 작성 02
: forEach문 안에 실행문을 작성합니다.
✔el(각 점)을 대상으로 addEventListener() 메서드로 "click" 이벤트를 발생시킵니다.
⇒ 점을 클릭했을 때, 작성된 함수가 실행됩니다.

✔getAttribute("href")을 이용해 href 속성을 불러와 선택합니다.
⇒이동하는 섹션에 대한 정보(아이디 값)를 가져오기 위함!

✔scrollIntoView()의 behavior: "smooth" 속성은 스크롤 되어 화면이 이동할 때, 화면이 부드럽게 움직이도록 합니다.

el.addEventListener("click", e => {
    e.preventDefault();

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

> 스크롤 이벤트 스크립트 작성
: 창(window)를 대상으로 scroll 이벤트를 발생시킵니다.

window.addEventListener("scroll", () => {});

> 스크롤 이벤트 실행문 작성 01
: 먼저, 스크롤 값을 구하기 위한 변수를 생성하고 변수에 스크롤 값을 저장합니다.
window.pageYOffset 과 window.scrollY, document.documentElement.scrollTop은 모두 같은 값을 불러오는 속성입니다.

✔ 변수에 세가지 값을 모두 저장하는 이유
⇒ 특정 브라우저에서 호환성의 문제로 앞의 값을 불러오지 못할 때, 대안으로 뒤의 값을 불러오기 위함입니다.

let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;

> 스크롤 이벤트 실행문 작성 02
: 저장한 scrollTop 값을 보여줄 수 있도록, 만들어 둔 span 태그 안에 innerText를 이용해 작성해 줍니다.
✔수학 계산을 해주는 Math 속성의 floor() 메서드는 값을 올림해 줍니다.

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

> 스크롤 이벤트 실행문 작성 03 : forEach문 작성 01
: 각 섹션의 공통 요소인 content__item 클래스를 이용해, 각각의 섹션을 모두 선택해 줍니다.
⇒ 각 섹션의 offsetTop 값과 scrollTop 값을 비교해 버튼을 활성화하기 위함!

✔ 여기서 e 와 i 는 ?
⇒ e는 각각의 섹션을, i는 그 섹션의 인덱스 값을 의미합니다.

document.querySelectorAll(".content__item").forEach((e, i) => {});

> 스크롤 이벤트 실행문 작성 03 : forEach문 작성 02
: forEach문의 안에 if문을 사용해 메뉴를 활성화 하는 조건문을 작성해 줍니다.

✔ scrollTop 값이 e(각 섹션)의 offsetTop 값보다 크거나 같다는 것은 화면에 그 섹션이 위치했다는 의미!
⇒ -10은 오차가 발생하는 것을 해결하기 위한 조치입니다.

✔ 메뉴(점) 활성화 하는 법?
01. querySelectorAll를 이용해 모든 메뉴를 선택해 준 후, forEach문을 작성해, 모든 메뉴의 active 클래스를 제거합니다.
⇒ 이미 지나가버린 섹션을 나타내는 메뉴는 활성화 되지 않도록 하기 위함!

02. querySelector를 이용해 i+1 번째 메뉴(현재 도달한 섹션을 나타내는 메뉴)를 선택해 준 후, active 클래스를 추가합니다.
⇒ 현재 도달한 섹션을 나타내는 메뉴를 활성화 함!

if(scrollTop >= e.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");
}

> 완성 페이지 보기

원본 소스 보기