패럴랙스 이펙트(3) 만들어보자!

오늘은 패럴랙스 이펙트 중 메뉴를 숨기고, 탑 버튼을 만들어보겠습니당

패럴랙스 이펙트 (3)

구조

<main id="main">
    <div class="parallax__wrap">
        <section id="section1" class="parallax__item">
            <span class="parallax__item__num">01</span>
            <h2 class="parallax__item__title">Section1</h2>
            <figure class="parallax__item__imgWrap">
                <div class="parallax__item__img"></div>
            </figure>
            <p class="parallax__item__desc">한 번 포기하면 습관이 된다. 절대 포기하지 말아라.</p>
        </section>
        <!-- //section1 -->
        <section id="section2" class="parallax__item">
            <span class="parallax__item__num">02</span>
            <h2 class="parallax__item__title">Section2</h2>
            <figure class="parallax__item__imgWrap">
                <div class="parallax__item__img"></div>
            </figure>
            <p class="parallax__item__desc">꿈이 있으면 잡아야 하고 절대 놓지 말아야 한다.</p>
        </section>
        <!-- //section2 -->
        <section id="section3" class="parallax__item">
            <span class="parallax__item__num">03</span>
            <h2 class="parallax__item__title">Section3</h2>
            <figure class="parallax__item__imgWrap">
                <div class="parallax__item__img"></div>
            </figure>
            <p class="parallax__item__desc">불가능은 오직 의지가 없는 사람에게만 존재한다.</p>
        </section>
        <!-- //section3 -->
        <section id="section4" class="parallax__item">
            <span class="parallax__item__num">04</span>
            <h2 class="parallax__item__title">Section4</h2>
            <figure class="parallax__item__imgWrap">
                <div class="parallax__item__img"></div>
            </figure>
            <p class="parallax__item__desc">불행한 사람은 다른 사람의 불행에서 위안을 얻는다.</p>
        </section>
        <!-- //section4 -->
        <section id="section5" class="parallax__item">
            <span class="parallax__item__num">05</span>
            <h2 class="parallax__item__title">Section5</h2>
            <figure class="parallax__item__imgWrap">
                <div class="parallax__item__img"></div>
            </figure>
            <p class="parallax__item__desc">사랑이 없는 삶은 꽃도 열매도 없는 나무와 같다.</p>
        </section>
        <!-- //section5 -->
        <section id="section6" class="parallax__item">
            <span class="parallax__item__num">06</span>
            <h2 class="parallax__item__title">Section6</h2>
            <figure class="parallax__item__imgWrap">
                <div class="parallax__item__img"></div>
            </figure>
            <p class="parallax__item__desc">무엇이든 사랑하는 방법은 잃어버릴 수 있다는 것을 깨닫는 것입니다.</p>
        </section>
        <!-- //section6 -->
        <section id="section7" class="parallax__item">
            <span class="parallax__item__num">07</span>
            <h2 class="parallax__item__title">Section7</h2>
            <figure class="parallax__item__imgWrap">
                <div class="parallax__item__img"></div>
            </figure>
            <p class="parallax__item__desc">성공을 얻기 위해 무엇을 포기해야 했는지에 따라 성공을 판단해라.</p>
        </section>
        <!-- //section7 -->
        <section id="section8" class="parallax__item">
            <span class="parallax__item__num">08</span>
            <h2 class="parallax__item__title">Section8</h2>
            <figure class="parallax__item__imgWrap">
                <div class="parallax__item__img"></div>
            </figure>
            <p class="parallax__item__desc">아름다움은 자신을 결정하는 순간부터 시작된다.</p>
        </section>
        <!-- //section8 -->
        <section id="section9" class="parallax__item">
            <span class="parallax__item__num">09</span>
            <h2 class="parallax__item__title">Section9</h2>
            <figure class="parallax__item__imgWrap">
                <div class="parallax__item__img"></div>
            </figure>
            <p class="parallax__item__desc">진짜 어려움은 자신에 대해 생각하는 방식을 극복하는 것입니다.</p>
        </section>
        <!-- //section9 -->
    </div>
</main>
<!-- //main -->

스크립트_탑버튼

// 02. 탑 버튼
window.addEventListener("scroll", () => {
    let scrollTop = window.pageYOffset || window.scrollY;


    // 문서 높이 구하는 방법
    console.log(document.body.scrollHeight);
    console.log(document.body.offsetHeight);
    console.log(document.documentElement.scrollHeight);
    console.log(document.documentElement.offsetHeight);

    if(scrollTop > document.body.scrollHeight - 1000){
        document.querySelector(".parallax__top").classList.add("show");
    } else {
        document.querySelector(".parallax__top").classList.remove("show");
    }
});

사용자가 스크롤할 때마다 현재 스크롤 위치 (scrollTop)를 다양한 방법으로 확인합니다 (pageYOffset 또는 scrollY).

문서의 높이를 구하는 방법은 다음과 같습니다:

document.body.scrollHeight: 문서 전체의 높이 (body 요소 포함)
document.body.offsetHeight: 문서의 높이 (body 요소만 포함)
document.documentElement.scrollHeight: 문서 전체의 높이 (html 요소 포함)
document.documentElement.offsetHeight: 문서의 높이 (html 요소만 포함)
스크롤 위치 (scrollTop)가 문서의 높이에서 1000을 뺀 값보다 크면 ".parallax__top" 클래스를 가진 요소에 "show" 클래스가 추가됩니다. 그렇지 않은 경우 "show" 클래스가 제거됩니다.

 

탑 버튼 애니메이션 구현

// 03. 탑 버튼 애니메이션
document.querySelector(".parallax__top a").addEventListener("click", (e) => {
    e.preventDefault();
    window.scrollTo({
        top: 0,
        behavior: "smooth"
    })
})

".parallax__top a" 선택자에 클릭 이벤트 리스너를 추가합니다. 클릭이 발생하면 preventDefault()를 사용하여 기본 동작을 막습니다 (이 경우 링크로 이동하는 동작을 막음).

그런 다음, window.scrollTo()를 사용하여 스크롤 위치를 맨 위로 이동시키는 애니메이션 효과를 제공합니다. scrollTo() 메서드에는 목표 위치인 top: 0과 애니메이션 동작을 지정하는 behavior: "smooth" 옵션이 포함됩니다. 이렇게 하면 맨 위로 부드럽게 스크롤됩니다.

메뉴 숨기기

// 01_2 메뉴
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;

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

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

window.addEventListener("scroll", scrollProgress);

scrollProgress() 함수는 스크롤 이벤트를 감지하고 일정 시간 간격으로 hasScroll() 함수를 호출합니다. 300ms 간격으로 현재 스크롤 여부를 체크하여 스크롤이 발생하면 hasScroll() 함수를 호출합니다.

hasScroll() 함수는 현재 스크롤 위치를 확인하여 이전 스크롤 위치와 비교합니다. 스크롤이 위로 이동했을 경우 ".parallax__nav" 클래스를 가진 요소에 "show" 클래스를 추가하고, 아래로 이동했을 경우 "show" 클래스를 제거합니다. 마지막으로 현재 스크롤 위치를 이전 스크롤 위치로 설정합니다.

window에 scroll 이벤트를 추가하여 scrollProgress() 함수를 실행시킵니다. 이를 통해 스크롤 동작을 감지하고 메뉴의 표시 여부를 제어합니다.