Parallax Scrolling 패럴랙스 스크롤링 03 : 상단 숨김 메뉴 active & 하단 top 숨김 버튼 & 부드러운 이동

⭐️ Parallax Scrolling 패럴랙스 스크롤링 03 : 상단 숨김 메뉴 active & 하단 top 숨김 버튼 & 부드러운 이동 ⭐️

01. Parallax Scrolling

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

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

🧊 위로 스크롤하면, 메뉴바가 숨겨져 있다가 나오도록 설정합니다.
🧊 브라우저의 맨 아래에 도달하면, top 버튼이 숨겨져 있다가 나오도록 설정합니다.
🧊 메뉴바와 top 버튼을 눌러 이동하게 될 때, 화면이 부드럽게 이동되는 효과를 보여줍니다.

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

1) 시멘틱 구조를 위해 nav 태그를 만들고, 그 안에 자식 태그로 ul 과 li 태그를 이용해 메뉴바 목록을 작성합니다.
2) 메뉴바를 눌렀을 때 이동이 되도록 a 태그로 링크를 걸어주고, class 로 active 를 '메뉴1'에 입력합니다.
3) 나중 작업이지만, script 의 계산에 따라 맨 윗쪽에서 메뉴가 사라져 버리기 때문에 class ="show"를 붙여줍니다.

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

<nav id="parallax__nav" class="show">
    <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: -200px;        /* parallax__nav 에 show 가 안 붙었을 때는 숨겨주기 위해 - 값을 줌 */
    z-index: 2000;      /* 메뉴바를 눌러서 작동해야 하므로, 레이아웃의 맨 윗쪽(표면)에 위치시킴 */
    background-color: rgba(0, 0, 0, 0.4);       /* rgba : 투명색 지정 */
    padding: 20px 30px;     /* 안쪽 여백 : 상하 좌우 */
    border-radius: 50px;    /* 테두리 곡률 */
    transition: top .4s ease;   /* parallax__nav 에 show 가 붙었을 때 top의 변화에 의한 결과를 0.4초의 시간 동안 서서히 보여줌 */
}

#parallax__nav.show {
    top: 20px;          /* parallax__nav 에 show 가 붙었을 때 나오게 하기 위함 */
}

#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] top 버튼 만들기 (html)

div 태그를 만들고, css 와 script 의 경로 설정을 위해 id로 이름을 정합니다.

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

[4] top 버튼 디자인하기 (css)

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

#parallax__top {
    position: fixed;        /* 아래에 보이지 않게 고정시켜 놓고 script 과정으로 띄우고자함 */
    left: 50%;
    right: 20px;
    bottom: -220px;         /* parallax__top 에 show 가 안 붙었을 때는 숨겨주기 위해 - 값을 줌 */
    transform: translateX(-50%);    /* top 버튼이 X축(가로)의 중간에 위치하도록 */
    z-index: 10000;         /* top 버튼을 눌러서 작동해야 하므로, 레이아웃의 맨 윗쪽(표면)에 위치시킴 */
    width: 40px;            /* parallax__top 가 차지할 영역의 너비 설정 */
    height: 40px;           /* parallax__top 가 차지할 영역의 높이 설정 */
    background: rgba(0,0,0,0.4);    /* rgba : 투명색 지정 */
    text-align: center;     /* 텍스트 중앙 정렬 */
    line-height: 40px;      /* 줄간격 : 기준 높이 */
    color: #fff;          /* 글자색 */
    border-radius: 50%;     /* 너비와 높이가 같을 때 테두리 곡률이 50% 이면 원 모양이 만들어짐 */
    padding: 10px;          /* 안쪽 여백 */
    cursor: pointer;        /* 커서 모양 지정*/
    transition: all 0.3s;
}

#parallax__top.show {
    bottom: 20px;           /* parallax__top 에 show 가 붙었을 때 나오게 하기 위함 */
}

#parallax__top:hover {      /* 마우스 오버 효과 */
    background: #fff;
    color: #000;
}

[5] 내용 구조 짜기 (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 -->

[6] 내용 구조 디자인하기 (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;
}

[7] scrollTop 확인칸 만들기 (html)

1) 시멘틱 구조를 위해 aside 태그 > div 태그 > span 태그를 작성합니다.
2) css 와 script 의 경로 설정을 위해, id 와 class 로 이름을 정합니다.

<aside id="parallax__info">
    <div class="scroll">scrollTop: <span>0</span>px</div>
</aside>

[8] 위치 확인칸 디자인하기 (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 .scroll {
    line-height: 1.4;           /* parallax__info li 와 .scroll 의 내용 글자에 대한 줄간격 설정 */
}

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

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

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

    // 계산 조건과 식 입력
    document.querySelectorAll("#parallax__nav li a").forEach( el => {      // 모든 parallax__nav li a 에 대해서,
        el.addEventListener("click", e => {     // 메뉴의 링크 버튼을 클릭했을 때,
            e.preventDefault();                 // 링크 이동 또는 새로고침 막아주기
    
            // 문서에서 요소의 속성 href 를 불러올 때. 스크롤 이동을 설정함 (부드럽게 스크롤되어 넘어가도록)
            document.querySelector(el.getAttribute("href")).scrollIntoView({behavior: "smooth"});
        });
    });
    
    
    // parallax__info 의 scrollTop 값 출력하기
        
    // 계산 조건과 식 입력
    
    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.ceil(scrollTop);       // 소수점; 내림 Math.floor( ), 올림 Math.ceil( ), 반올림 Math.round( )
        // script 맨 위쪽에   const scroll = document.querySelector("#parallax__info .scroll span");    이렇게 scroll 상수 설정 후,
        // scroll.innerText = Math.round(scrollTop);    이렇게 입력해도 출력됨
    
    
    
        // 숨겨져 있는 메뉴바 나타내기  01. scrollTop 값이 0보다 큰 경우에 작동시키기
        // if(scrollTop > 0){      // scrollTop 값이 0보다 크면,
        //     document.querySelector("#parallax__nav").classList.add("show");     // parallax__nav 의 클래스에 show 를 추가하고
        // } else {                                                                // 그렇지 않으면
        //     document.querySelector("#parallax__nav").classList.remove("show");  // parallax__nav 의 클래스에 show 를 제거하시오.
        // }
    
    
    
        // 숨겨져 있는 top 버튼 나타내기 : scrollTop 값이 (문서 전체 높이 - 현재 보여지는 브라우저 높이) 보다 크거나 같을 경우에 작동시키기
        // scrollTop 값이 (문서 전체 높이 - 현재 보여지는 브라우저 높이) 보다 크거나 같다는 것은 스크롤이 문서의 끝에 도달했다는 의미
    
        if(scrollTop >= document.body.scrollHeight - window.innerHeight){       // scrollTop 값이 (문서 전체 높이 - 현재 보여지는 브라우저 높이) 값보다 크거나 같을 때,
            document.querySelector("#parallax__top").classList.add("show");     // parallax__top 의 클래스에 show 를 추가하고
        } else {                                                                // 그렇지 않으면
            document.querySelector("#parallax__top").classList.remove("show");  // parallax__top 의 클래스에 show 를 제거하시오.
        }
    });
    
    
    
    // top 버튼 누르면 스크롤이 맨 위로 이동하도록 작동시키기
    document.querySelector("#parallax__top").addEventListener("click", () => {      // top 버튼을 클릭했을 때,
    
        window.scrollTo({left: 0, top: 0, behavior: "smooth"});
    });     // 브라우저의 (left = x 좌표 0, top = y좌표 0) 위치로 스크롤을 이동시키고, 동작은 "smooth" 부드럽게 스크롤되어 넘어가도록 설정
    // scrollTo() : (절대 좌표) 왼쪽 상단 모서리부터 시작하는 전체 크기의 브라우저를 기준으로, 지정된 좌표로 스크롤을 이동시킴
    
    
    
    // 숨겨져 있는 메뉴바 나타내기  02. (현재의 스크롤 값 - 과거의 스크롤 값) 을 이용하여, 스크롤을 위로 올리는 경우에 작동시키기
    
    // 현재의 스크롤 값을 실행하는 변수
    let nowScroll = true;       // 실행 O
    // let nowScroll = false;      // 실행 X
    // 트리거 변수 : 트리거의 발동 조건을 정의하는 용도로 사용됨. 현재 및 이전 실행에 대한 정보에 접근함
    // trigger 는 태그가 언제 실행되는가를 정하는 타이밍을 의미함 (태그를 작동시키는 순간을 결정)
    
    let lastScroll = 0;     // 과거의 스크롤 값을 변수로 지정
    
    function scrollProgress(){          // scrollProgress 함수는
        nowScroll = true;               // 스크롤이 움직일 때,
    
        setInterval(() => {             // setInterval 함수가 실행되도록 함 (setInterval : 일정한 시간 간격을 두고 작업을 반복 실행할 때 사용)
            if(nowScroll){              // 현재의 스크롤 값이 ~이면
                nowScroll = false;      // 스크롤이 움직였을 때만 함수를 실행시키기 위함
                hasScroll();
            }
        }, 300);     // 0.3초 간격 (스크롤할 때마다 인식하면 버벅거리므로, 일정한 간격을 두고 실행될 수 있도록)
    };
    
    function hasScroll(){       // hasScroll 함수는
        let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;
        // scrollTop 변수 안에 브라우저 기준의 세로 스크롤 값이 있을 때,
    
        // scrollTop 값이 lastScroll 값보다 작다면, ( = 스크롤이 위로 올라갈 때, )
        if(scrollTop < lastScroll){
            document.querySelector("#parallax__nav").classList.add("show");     // parallax__nav 의 클래스에 show 를 추가하고
        } else {                                                                // 그렇지 않으면
            document.querySelector("#parallax__nav").classList.remove("show");  // parallax__nav 의 클래스에 show 를 제거하도록 함
        }
    
        // 이전 스크롤 값 = 현재 스크롤 값;
        lastScroll = scrollTop;
    };
    
    window.addEventListener("scroll", scrollProgress);          // 스크롤이 됐을 때, scrollProgress 함수를 실행하시오.

03. 결과보기

☛ 원본 소스 보기