패럴랙스 이펙트03

패럴랙스 이펙트 3

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

HTML 코드

이번 패럴랙스 이펙트의 핵심이 되는 HTML의 부분입니다. 메뉴는 패럴랙스 01번 유형과 같지만, 스크롤 값이 맨 아래에 다다르면 Top버튼이 나타나도록 하기 위해, #parallax__top을 만들어 주었습니다.

HTML 보기

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

<div id="parallax__top">
    Top
</div>
<!-- parallax__top -->

스크립트 요약

1. 메뉴를 클릭했을 때 해당 섹션으로 이동합니다.
2. 스크롤을 내릴 때엔 메뉴가 사라지고, 스크롤을 올리면 메뉴가 나타납니다.
3. 스크롤의 끝에 거의 다다르면 top 버튼이 나타나며, top 버튼을 누르면 스크롤이 맨 위로 이동합니다.

전체 스크립트 보기

let nowScroll = true;   //트리거 변수를 생성
let lastScroll = 0;

function scrollProgress(){
    nowScroll = true;

    setInterval(() => {
        if(nowScroll){
            nowScroll = false;
            hasScroll();
        }
    }, 300);
}

function hasScroll(){
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;
    let topbtn = document.querySelector("#parallax__top");
    document.querySelector("#parallax__info span").innerText = Math.ceil(scrollTop);

    if(scrollTop < lastScroll){
        document.querySelector("#parallax__nav").classList.add("show");
    } else {
        document.querySelector("#parallax__nav").classList.remove("show");
    }
    lastScroll = scrollTop;

    if(scrollTop >= document.body.scrollHeight - window.innerHeight){
        topbtn.classList.add("show");
    } else {
        topbtn.classList.remove("show");
    }

    topbtn.addEventListener("click", ()=>{
        window.scroll({top: 0, behavior: "smooth"});
    });
}

window.addEventListener("scroll", scrollProgress);

스크립트 뜯어보기

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

> 트리거 변수 생성
: 값을 true, false로 설정하여, 어떤 실행문을 실행시키거나 실행시키지 않는 스위치로 작용하는 변수를 트리거 변수라고 합니다.

✔ nowScroll 과 lastScroll ?
스크롤을 내리는지 올리는지 확인할 수 있는 간단한 방법은, 이전의 스크롤 값과 현재의 스크롤 값을 비교하는 것입니다.
- 현재의 스크롤 값 > 이전의 스크롤 값 ⇒ 스크롤을 내리는 중
- 현재의 스크롤 값 < 이전의 스크롤 값 ⇒ 스크롤을 올리는 중

let nowScroll = true;   //트리거 변수를 생성
let lastScroll = 0;

> 트리거 변수를 이용한 함수 실행문 작성
: 스크롤 이벤트가 발생하면 실행시킬 scrollProgress 함수를 작성합니다.

1. setInterval() 메서드를 이용해 0.3초마다 if문을 실행합니다.
2. if문은 nowScroll이 true일 때 실행됩니다.
3. nowScroll은 스크롤이 움직일 때(= scrollProgress 함수가 실행 될 떄) true가 됩니다.
4. if문이 실행되면, nowScroll은 false가 되고, hasScroll 함수가 실행됩니다.

✔ 왜 nowScroll을 바로 false로 바꾸는 걸까?
⇒ 스크롤이 움직였을 경우에만 hasScroll 함수를 실행시키기 위함!

function scrollProgress(){
    nowScroll = true;

    setInterval(() => {
        if(nowScroll){
            nowScroll = false;
            hasScroll();
        }
    }, 300);
}

> 스크롤 이벤트 실행문 작성 01
: hasScroll 함수에 스크롤 이벤트에 따른 메뉴, top버튼 활성 스크립트를 작성합니다.

function hasScroll(){};

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

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

이후, 저장한 scrollTop 값을 보여줄 수 있도록 만들어 둔 span 태그 안에 innerText를 이용해 작성해 줍니다.
✔수학 계산을 해주는 Math 속성의 ceil() 메서드는 값을 내림해 줍니다.

let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;
document.querySelector("#parallax__info span").innerText = Math.ceil(scrollTop);

> 스크롤 이벤트 실행문 작성 03
: top 버튼에 이벤트를 발생시키기 위해, top버튼을 선택하는 선택자를 작성합니다.

let topbtn = document.querySelector("#parallax__top");

> 스크롤 이벤트 실행문 작성 04 : 메뉴 보이기 if문 작성
: 메뉴를 선택한 뒤, scrollTop 값과 lastScroll 값을 비교하여 show 클래스를 추가하거나 삭제합니다.
scrollTop < lastScroll ⇒ 스크롤을 올린 경우를 의미하며, show 클래스가 추가되면 메뉴가 보입니다.

✔ lastScroll = scrollTop ?
⇒ 비교가 끝난 뒤엔 lastScroll 값에 현재의 scrollTop 값을 저장하여 이후 이 함수가 실행될 때, 새로 바뀐 scrollTop 값과 비교하도록 합니다.

if(scrollTop < lastScroll){
    document.querySelector("#parallax__nav").classList.add("show");
} else {
    document.querySelector("#parallax__nav").classList.remove("show");
}
lastScroll = scrollTop;

> 스크롤 이벤트 실행문 작성 05 : Top 버튼 보이기 if문 작성
: 스크롤의 마지막에 거의 다다르면 top 버튼에 show 클래스를 추가해 top 버튼이 보이도록 합니다.

✔ scrollTop >= document.body.scrollHeight - window.innerHeight ?
01. document.body.scrollHeight는 문서 전체의 높이를 의미합니다.
02. window.innerHeight는 사용자가 보는 화면인 window의 안쪽 높이를 의미합니다.
03. document.body.scrollHeight - window.innerHeight는 즉, 최대 내릴 수 있는 스크롤 값이 됩니다.(오차는 있을 수 있음)

⇒ scrollTop 값이 최대 스크롤 값보다 크거나 같다 = 스크롤이 끝에 다다른 경우를 의미!

if(scrollTop >= document.body.scrollHeight - window.innerHeight){
    topbtn.classList.add("show");
} else {
    topbtn.classList.remove("show");
}

> Top 버튼 클릭 이벤트 실행문 작성
: top 버튼을 클릭했을 때, addEventListener() 메서드를 이용해 이벤트를 발생시켜 스크롤이 맨 위로 이동하도록 실행문을 작성합니다.

✔ window.scroll()
⇒ scroll()은 대상의 스크롤을 해당하는 위치로 이동시키는 메서드입니다.
window를 대상으로 하여, 스크롤을 top: 0의 위치로 이동시키며, behavior: "smooth" 속성을 작성해 스크롤이 부드럽게 움직이도록 합니다.

topbtn.addEventListener("click", ()=>{
    window.scroll({top: 0, behavior: "smooth"});
});

> 완성 페이지 보기

원본 소스 보기