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

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

01. Parallax Scrolling

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

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

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

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

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

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

<nav id="parallax__dot">
    <ul>
        <li class="active"><a href="#section1"><span>메뉴1</span></a></li>
        <li><a href="#section2"><span>메뉴2</span></a></li>
        <li><a href="#section3"><span>메뉴3</span></a></li>
        <li><a href="#section4"><span>메뉴4</span></a></li>
        <li><a href="#section5"><span>메뉴5</span></a></li>
        <li><a href="#section6"><span>메뉴6</span></a></li>
        <li><a href="#section7"><span>메뉴7</span></a></li>
        <li><a href="#section8"><span>메뉴8</span></a></li>
        <li><a href="#section9"><span>메뉴9</span></a></li>
    </ul>
</nav>

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

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

#parallax__dot {
    position: fixed;    /* 오른쪽 중간에 고정해서 띄워놓기 */
    right: 20px;        /* 고정해 둘 위치 : 오른쪽 간격 설정 */
    top: 50%;           /* top 을 30% 주고 아래의 transform 을 지워도 결과값은 같음 */
    transform: translateY(-50%);    /* 메뉴바가 Y축(위아래)의 중간에 위치하도록 */
    z-index: 10000;     /* 메뉴바를 눌러서 작동해야 하므로, 레이아웃의 맨 윗쪽(표면)에 위치시킴 */
    background: rgba(0,0,0,0.4);    /* rgba : 투명색 지정 */
    padding: 20px 10px;     /* 안쪽 여백 : 상하 좌우 */
    border-radius: 30px;    /* 테두리 곡률 */
}

#parallax__dot li {
    position: relative;     /* parallax__dot li a 의 position 에 대한 기준점 설정 (정하지 않으면 세로로 긴 타원만 보임) */
    width: 20px;            /* parallax__dot li 가 차지할 영역의 너비 설정 */
    height: 20px;           /* parallax__dot li 가 차지할 영역의 높이 설정 */
    border-radius: 50%;     /* 너비와 높이가 같을 때 테두리 곡률이 50% 이면 원 모양이 만들어짐 */
    margin: 12px 8px;       /* 바깥 여백 : 상하 좌우 */
    box-shadow: 0 0 0 2px rgba(225,225,225,0);      /* 투명도가 0으로 보여지지 않게 설정,  박스 그림자 효과 : 가로px, 세로px, 번짐 정도, 확장축소, 색깔 | inset, initial, inherit */
    transition: box-shadow .2s ease;    /* box-shadow에 의한 결과를 0.2초의 시간 동안 서서히 변화시킴 */
}

#parallax__dot li a {
    background: #fff;
    width: 100%;
    height: 100%;
    position: absolute;     /* 위치 설정; 부모 영역을 기준으로 설정되어야 함 -> relative 설정 */
    top: 0;
    left: 0;
    border-radius: 50%;
    transition: transform .2s ease;     /* parallax__dot li.active a 의 transform에 의한 결과를 0.2초의 시간 동안 서서히 변화시킴 */
}

#parallax__dot li.active {
    box-shadow: 0 0 0 2px rgba(225,225,225,1);      /* active 효과가 지정된 메뉴는 그림자의 투명도를 1로 설정하여 보여줌 */
}

#parallax__dot li.active a {
    transform: scale(0.4);      /* transform : 요소에 회전, 크기 조절, 기울이기, 이동 효과 등을 부여 */
}

#parallax__dot li span {
    display: none;          /* parallax__dot li span 의 글자(메뉴 글자)를 보이지 않게 설정 */
}

[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] scrollTop 확인칸 만들기 (html)

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

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

[6] scrollTop 확인칸 디자인하기 (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 .scroll 의 내용 글자에 대한 줄간격 설정 */
}

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

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

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

// 계산 조건과 식 입력
document.querySelectorAll("#parallax__dot a").forEach( el => {      // 모든 parallax__dot a 에 대해서,
    el.addEventListener("click", e => {     // 메뉴의 링크 버튼을 클릭했을 때,
        e.preventDefault();                 // 링크 이동 또는 새로고침 막아주기
        
        // 문서에서 요소의 속성 href 를 불러올 때. 스크롤 이동을 설정함 (부드럽게 스크롤되어 넘어가도록)
        document.querySelector(el.getAttribute("href")).scrollIntoView({behavior: "smooth"});
        
        // 참고하기 : 브라우저 스크롤 메서드
        // window.scroll(), window.scrollTo(), window.scrollBy() 모두 앞의 window를 생략 가능
        
        // window.scroll(0, 1000);                  // 브라우저의 (x 좌표 0, y 좌표 1000) 위치로 스크롤을 이동시킴
        // window.scroll({left: 0, top: 1000});     // 브라우저의 (left = x 좌표 0, top = y 좌표 1000) 위치로 스크롤을 이동시킴
        // window.scroll({left: 0, top: 1000, behavior: "smooth"});
        // 브라우저의 (left = x 좌표 0, top = y좌표 1000) 위치로 스크롤을 이동시키고, 동작은 "smooth" 부드럽게 스크롤되어 넘어가도록 설정
        
        // scrollTo() : (절대 좌표) 왼쪽 상단 모서리부터 시작하는 전체 크기의 브라우저를 기준으로, 지정된 좌표로 스크롤을 이동시킴
        // window.scrollTo(0, 1000);                // 브라우저의 (x 좌표 0, y 좌표 2000) 위치로 스크롤을 이동시킴
        // window.scrollTo({left: 0, top: 2000});   // 브라우저의 (left = x 좌표 0, top = y 좌표 2000) 위치로 스크롤을 이동시킴
        // window.scrollTo({left: 0, top: 2000, behavior: "smooth"});
        // 브라우저의 (left = x 좌표 0, top = y좌표 2000) 위치로 스크롤을 이동시키고, 동작은 "smooth" 부드럽게 스크롤되어 넘어가도록 설정
        // scrollTo()의 값은 scroll()의 값과 같으나, scrollTo()가 호환성이 더 좋음
        
        // scrollBy() : (상대 좌표) 현재 스크롤이 있는 좌표를 기준으로, 지정된 좌표로 스크롤을 이동시킴
        // window.scrollBy(0, 1000);                // 스크롤이 있는 좌표에서 (x 좌표 0, y 좌표 3000) 위치로 스크롤을 이동시킴
        // window.scrollBy({left: 0, top: 3000});   // 스크롤이 있는 좌표에서 (left = x 좌표 0, top = y 좌표 3000) 위치로 스크롤을 이동시킴
        // window.scrollBy({left: 0, top: 3000, behavior: "smooth"});
        /// 브라우저의 (left = x 좌표 0, top = y좌표 3000) 위치로 스크롤을 이동시키고, 동작은 "smooth" 부드럽게 스크롤되어 넘어가도록 설정
    });
});
        
        
        
// 스크롤 내릴 때, 화면에 보여지는 section$ 의 Y축 위치에 따라 메뉴의 점에 active 효과 주기
        
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 span 안에 출력하시오.
    document.querySelector("#parallax__info span").innerText = Math.floor(scrollTop);       // 소수점; 내림 Math.floor( ), 올림 Math.ceil( ), 반올림 Math.round( )
    // script 맨 위쪽에   const scroll = document.querySelector("#parallax__info span");    이렇게 scroll 상수 설정 후,
    // scroll.innerText = Math.round(scrollTop);    이렇게 입력해도 출력됨
        
        
    // .contents__item(section 영역)에서의 요소값, 위치값 중에서
    document.querySelectorAll(".contents__item").forEach((e, i) => {
        
        // scrollTop 의 값이 요소값의 Y축 값보다 크다면,
        if(scrollTop >= e.offsetTop -10){       // 오차가 생기므로 오차에 의한 오류를 막기 위해서 ( - 아무 숫자든 상관 없음)
        
        document.querySelectorAll("#parallax__dot li").forEach(li => {      // 모든 parallax__dot li 에 대하여,
            li.classList.remove("active");                                  // li 의 클래스에 있는 active룰 제거하고
        });
        
            // parallax__dot li 의 (index +1)번째 li 의 클래스에 active룰 추가하시오.
            document.querySelector("#parallax__dot li:nth-child(" + ( i + 1 ) + ")").classList.add("active");
        };                                              // index 가 0부터 시작하므로 +1 해줌 (그래야 마지막 영역까지 포함됨)
    });
});

03. 결과보기

☛ 원본 소스 보기