Parallax Scrolling 패럴랙스 스크롤링 05 : 부드러운 이동 & 요소의 이질감 효과 & 하단 top 버튼 숨김

⭐️ Parallax Scrolling 패럴랙스 스크롤링 05 : 부드러운 이동 & 요소의 이질감 효과 & 하단 top 버튼 숨김 ⭐️

01. Parallax Scrolling

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

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

🧊 브라우저의 맨 아래에 도달하면, top 버튼이 숨겨져 있다가 나오도록 설정합니다.
🧊 top 버튼을 눌러 이동하게 될 때, 화면이 부드럽게 이동되는 효과를 보여줍니다.
🧊 section 의 요소들(숫자, 이미지, 글)이 스크롤하는 길이에 비례하여 살짝 움직이면서 이질감이 느껴지는 효과를 표현합니다.

[1] top 버튼 만들기 (html)

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

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

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

[2] 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;
}

[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)

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

#parallax__cont {
        max-width: 1600px;          /* 최대 너비 설정 */
        width: 98%;
        margin: 0 auto;
        /* background-color: rgba(255, 255, 255, 0.1);   임시로 준 값, 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] parallax__info 확인칸 만들기 (html)

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

<aside id="parallax__info">
    <div class="scroll">scrollTop: <span>0</span>px</div>
    <div class="info">
        <ul>
            <li>( scrollTop - section$ 높이값 ) * 0.07</li>
            <li>#(sT - s1) * 0.07 : <span class="offset1">0</span>px</li>
            <li>#(sT - s2) * 0.07 : <span class="offset2">0</span>px</li>
            <li>#(sT - s3) * 0.07 : <span class="offset3">0</span>px</li>
            <li>#(sT - s4) * 0.07 : <span class="offset4">0</span>px</li>
            <li>#(sT - s5) * 0.07 : <span class="offset5">0</span>px</li>
            <li>#(sT - s6) * 0.07 : <span class="offset6">0</span>px</li>
            <li>#(sT - s7) * 0.07 : <span class="offset7">0</span>px</li>
            <li>#(sT - s8) * 0.07 : <span class="offset8">0</span>px</li>
            <li>#(sT - s9) * 0.07 : <span class="offset9">0</span>px</li>
        </ul>
    </div>
</aside>
<!-- //parallax__info -->

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

[7] 이질감 효과 및 변하는 값 계산하여 출력하기 (script)

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

// scrollTop 값 & top 버튼
        
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.round(scrollTop);       // 소수점; 내림 Math.floor( ), 올림 Math.ceil( ), 반올림 Math.round( )
    // script 맨 위쪽에   const scroll = document.querySelector("#parallax__info .scroll span");    이렇게 scroll 상수 설정 후,
    // scroll.innerText = Math.round(scrollTop);    이렇게 입력해도 출력됨
    
                
    // 숨겨져 있는 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() : (절대 좌표) 왼쪽 상단 모서리부터 시작하는 전체 크기의 브라우저를 기준으로, 지정된 좌표로 스크롤을 이동시킴
    
            
    
// parallax__info 에 들어가는 값 & 애니메이션 실행시키기
            
// 이질감 효과 (재귀함수)
function scroll(){          // scroll 함수는
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;
    // scrollTop 변수 안에 브라우저 기준의 세로 스크롤 값이 있을 때,
    
    // document.querySelector("#parallax__info .scroll span").innerText = Math.round(scrollTop);        // scrollTop 값 출력, 위에 해줌
    
    // i 가 1부터 9까지 증가할 때,
    for (let i=1; i<=9; i++) {

        let offTop = document.getElementById("section" + i).offsetTop;

        document.querySelector(".offset" + i).innerText = Math.round(( scrollTop - offTop ) * 0.07);

        // document.querySelector(".offset" + i).innerText = scrollTop - document.getElementById("section" + i).offsetTop;
    }   // 요소 (offset + i) 안에 출력하시오. = scrollTop 에서 아이디 (section + i) 요소의 Y축 값(문서 기준)을 뺀 값을
    
    
    // .contents__item(section 영역) 중에서
    document.querySelectorAll(".contents__item").forEach(item => {

        const target1 = item.querySelector(".contents__item__num");     // 숫자에 대한 상수 설정
        const target2 = item.querySelector(".contents__item__img");     // 이미지에 대한 상수 설정
        const target3 = item.querySelector(".contents__item__desc");    // 내용글에 대한 상수 설정

        let offset1 = (scrollTop - item.offsetTop) * 0.04;              // 움직이는 값에 대한 변수 설정
        let offset2 = (scrollTop - item.offsetTop) * 0.07;
        let offset3 = (scrollTop - item.offsetTop) * 0.05;

        // target1.style.transform = `translateY(${-offset1}px)`;        // 숫자를 offset1 만큼 올려줌
        // target2.style.transform = `translateY(${offset2}px)`;         // 이미지를 offset2 만큼 내려줌
        // target3.style.transform = `translateX(${offset3}px)`;         // 내용글을 offset3 만큼 오른쪽으로 밀어줌

        gsap.to(target1, {duration: .5, y: -offset1, ease:"power1.out"})        // GSAP 활용하기
        gsap.to(target2, {duration: .3, y: offset2})
        gsap.to(target3, {duration: .5, x: offset3})

    });

    requestAnimationFrame(scroll);
    /* 애니메이션을 구현하기 위해 최적화된 함수: 움직임이 부드럽고 메모리도 덜 차지함, 1초에 60번 실행시킴 */
}
scroll();

03. 결과보기

☛ 원본 소스 보기