[Parallax Effect] 패럴럭스 이펙트 01

패럴럭스 이펙트 01

이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 패럴럭스(parallax, 패럴랙스) 이펙트를 만들어보도록 하겠습니다. 먼저 parallax란, '시차(視差)'라는 의미를 가진 천문학 용어이며, 이번 포스팅에서 내비게이션 바에서 특정 섹션으로 가는 버튼을 누르면 해당 섹션으로 시차를 두고 스무스하게 이동시켜 주는 효과를 만들어보고자 합니다.

HTML 소스

header, parallax__nav(내비게이션), main(parallax__cont(명언 모음)), aside(parallax__info(스크롤탑값)), footer(모달 박스)로 구성된다.

<body class="img10">
    <header id="header">
        <h1>JAVASCRIPT PARALLAX EFFECT 01</h1>
        <p>패럴럭스 이펙트</p>
        <ul>
            <li class="active"><a href="parallaxEffect01.html">01</a></li>
            <li><a href="parallaxEffect02.html">02</a></li>
            <li><a href="parallaxEffect03.html">03</a></li>
            <li><a href="parallaxEffect04.html">04</a></li>
            <li><a href="parallaxEffect05.html">05</a></li>
            <li><a href="parallaxEffect06.html">06</a></li>
            <li><a href="parallaxEffect07.html">07</a></li>
        </ul>
    </header>
    <!-- //header -->

    <nav id="parallax__nav">
        <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>
    <!-- //parallax__nav -->

    <main id="parallax__cont">
        <div id="contents">
            <section id="section1" class="content__item">
                <span class="content__item__num">01</span>
                <h2 class="content__item__title">section1</h2>
                <figure class="content__item__imgWrap">
                    <div class="content__item__img"></div>
                </figure>
                <p class="content__item__desc">결과도 중요하지만, 과정을 더 중요하게 생각한다.</p>
            </section>
            <!-- //section1 -->

            <section id="section2" class="content__item">
                <span class="content__item__num">02</span>
                <h2 class="content__item__title">section2</h2>
                <figure class="content__item__imgWrap">
                    <div class="content__item__img"></div>
                </figure>
                <p class="content__item__desc">인생에서 많은 패배에 직면하겠지만 결코 패배하지 말라.</p>
            </section>
            <!-- //section2 -->

            <section id="section3" class="content__item">
                <span class="content__item__num">03</span>
                <h2 class="content__item__title">section3</h2>
                <figure class="content__item__imgWrap">
                    <div class="content__item__img"></div>
                </figure>
                <p class="content__item__desc">“내 너 그럴 줄 알았다” 알았으면 제발 미리 말 해줘라.</p>
            </section>
            <!-- //section3 -->

            <section id="section4" class="content__item">
                <span class="content__item__num">04</span>
                <h2 class="content__item__title">section4</h2>
                <figure class="content__item__imgWrap">
                    <div class="content__item__img"></div>
                </figure>
                <p class="content__item__desc">늦었다고 생각할 때가 진짜 너무 늦었다.</p>
            </section>
            <!-- //section4 -->

            <section id="section5" class="content__item">
                <span class="content__item__num">05</span>
                <h2 class="content__item__title">section5</h2>
                <figure class="content__item__imgWrap">
                    <div class="content__item__img"></div>
                </figure>
                <p class="content__item__desc">즐길 수 없으면 피하라.</p>
            </section>
            <!-- //section5 -->

            <section id="section6" class="content__item">
                <span class="content__item__num">06</span>
                <h2 class="content__item__title">section6</h2>
                <figure class="content__item__imgWrap">
                    <div class="content__item__img"></div>
                </figure>
                <p class="content__item__desc">생활은 과감한 모험이거나 아니면 아무것도 아니다.</p>
            </section>
            <!-- //section6 -->

            <section id="section7" class="content__item">
                <span class="content__item__num">07</span>
                <h2 class="content__item__title">section7</h2>
                <figure class="content__item__imgWrap">
                    <div class="content__item__img"></div>
                </figure>
                <p class="content__item__desc">어려운 길은 길이 아니다.</p>
            </section>
            <!-- //section7 -->

            <section id="section8" class="content__item">
                <span class="content__item__num">08</span>
                <h2 class="content__item__title">section8</h2>
                <figure class="content__item__imgWrap">
                    <div class="content__item__img"></div>
                </figure>
                <p class="content__item__desc">잠을 자도 피로가 안 풀리냐.</p>
            </section>
            <!-- //section8 -->

            <section id="section9" class="content__item">
                <span class="content__item__num">09</span>
                <h2 class="content__item__title">section9</h2>
                <figure class="content__item__imgWrap">
                    <div class="content__item__img"></div>
                </figure>
                <p class="content__item__desc">인생은 위대한 모험이거나 아니면 아무것도 아니다.</p>
            </section>
            <!-- //section9 -->
        </div>
    </main>
    <!-- //main -->

    <aside id="parallax__info">
        <div class="scroll">scrollTop : <span>0</span>px</div>
        <div class="info">
            <ul>
                <li>#section1 offset() : <span class="offset1">0</span>px</li>
                <li>#section2 offset() : <span class="offset2">0</span>px</li>
                <li>#section3 offset() : <span class="offset3">0</span>px</li>
                <li>#section4 offset() : <span class="offset4">0</span>px</li>
                <li>#section5 offset() : <span class="offset5">0</span>px</li>
                <li>#section6 offset() : <span class="offset6">0</span>px</li>
                <li>#section7 offset() : <span class="offset7">0</span>px</li>
                <li>#section8 offset() : <span class="offset8">0</span>px</li>
                <li>#section9 offset() : <span class="offset9">0</span>px</li>
            </ul>
        </div>
    </aside>
    <!-- //parallax__info -->

    <footer id="footer">
        <div class="modal__wrap">
        </div>
    </footer>
    <!-- //footer -->
</body>

JS 소스 : scrollTop값 구하기 / active 효과 작동시키기

상수(const) scroll을 생성하여 그 안에 "#parallax__info .scroll span"(스크롤탑 값 표시하는 곳)과 연결시킨다. 그런 다음, window.addEventListener를 통해 스크롤탑 값을 구하고 forEach를 통해 active 효과가 원활하게 작동하도록 설정한다.

마지막으로 // Info 에서처럼 스크롤탑값이 화면에 보일 수 있도록 한다.

const scroll = document.querySelector("#parallax__info .scroll span");

window.addEventListener("scroll", () => {
    // scrollTop값 구하는 방법 3가지
    // let scrollTop = window.pageYOffset;
    // let scrollTop = window.scrollY;
    // let scrollTop = document.documentElement.scrollTop;

    // 3가지를 다 써도 상관없음
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;

    // active 효과 작동시키기 (수동)
    // if(scrollTop >= document.getElementById("section1").offsetTop){
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {
    //         li.classList.remove("active");
    //     });
    //     document.querySelector("#parallax__nav li:nth-child(1)").classList.add("active");
    // }
    // if(scrollTop >= document.getElementById("section2").offsetTop){
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {
    //         li.classList.remove("active");
    //     });
    //     document.querySelector("#parallax__nav li:nth-child(2)").classList.add("active");
    // }
    // 이걸 9번이나 써줘야 하니 귀찮기 때문에 for문 / forEach문을 사용해야 한다.

    // active 효과 작동시키기: for문
    // for(let i=1; i<=9; i++) {
    //     if(scrollTop >= document.getElementById("section"+i).offsetTop){
    //         document.querySelectorAll("#parallax__nav li").forEach(li => {
    //             li.classList.remove("active");
    //         });
    //         document.querySelector("#parallax__nav li:nth-child("+i+")").classList.add("active");
    //     }
    // }

    // active 효과 작동시키기 : forEach
    document.querySelectorAll(".content__item").forEach((element, index) => {
        if(scrollTop >= element.offsetTop -2){
            document.querySelectorAll("#parallax__nav li").forEach(li => {
                li.classList.remove("active");
            });
            document.querySelector("#parallax__nav li:nth-child("+(index+1)+")").classList.add("active");
        }
    });

    // Info : 스크롤탑값 표시하기
    // scroll.innerText = Math.round(scrollTop);
    document.querySelector("#parallax__info .scroll span").innerText = Math.round(scrollTop);

    // document.querySelector(".offset1").innerText = document.getElementById("section1").offsetTop;
    // document.querySelector(".offset2").innerText = document.getElementById("section2").offsetTop;
    // document.querySelector(".offset3").innerText = document.getElementById("section3").offsetTop;
    // document.querySelector(".offset4").innerText = document.getElementById("section4").offsetTop;
    // document.querySelector(".offset5").innerText = document.getElementById("section5").offsetTop;
    // document.querySelector(".offset6").innerText = document.getElementById("section6").offsetTop;
    // document.querySelector(".offset7").innerText = document.getElementById("section7").offsetTop;
    // document.querySelector(".offset8").innerText = document.getElementById("section8").offsetTop;
    // document.querySelector(".offset9").innerText = document.getElementById("section9").offsetTop;

    for(let i=1; i<=9; i++) {
        document.querySelector(".offset" + i).innerText = document.getElementById("section" + i).offsetTop;
    }
});

    // 스크롤 이동
    document.querySelectorAll("#parallax__nav li a").forEach(li => {
        li.addEventListener("click", (e) => {
            e.preventDefault();
            document.querySelector(li.getAttribute("href")).scrollIntoView({
                behavior: "smooth"  // 이동 부드럽게
            });
        });
    });

JS 소스 : 스크롤 이동 효과

이제 내비게이션 바에서 메뉴 버튼을 누를 때 스크롤 이동이 되도록 작업해주도록 하자. forEach문을 이용해서 작업하며, behavior : "smooth" 를 통해 이동 애니메이션을 부드럽게 (말 그대로 스무스하게) 설정할 수 있다.

// 스크롤 이동
document.querySelectorAll("#parallax__nav li a").forEach(li => {
    li.addEventListener("click", (e) => {
        e.preventDefault();
        document.querySelector(li.getAttribute("href")).scrollIntoView({
            behavior: "smooth"  // 이동 부드럽게
        });
    });
});

CSS 소스

패럴럭스 효과에만 적용되는 CSS 소스이다. 공통/초기화 부분 CSS는 하단의 CSS 소스 보기 버튼을 눌러 확인할 것.

<style>
    /* parallax__nav */
    #parallax__nav {
        position: fixed;
        right: 20px;
        top: 20px;
        z-index: 2000;
        background-color: rgba(0,0,0,0.4);
        padding: 20px 30px;
        border-radius: 50px;
    }

    #parallax__nav li {
        display: inline;
        margin: 0 5px;
    }
    #parallax__nav li a {
        display: inline-block;
        height: 30px;
        padding: 5px 20px;
        text-align: center;
        line-height: 30px;
    }
    #parallax__nav li.active a {
        background: #fff;
        color: #000;
        border-radius: 20px;
        box-sizing: content-box;
    }

    #parallax__cont {
        max-width: 1600px;
        width: 98%;
        margin: 0 auto;
        /* background-color: rgba(255,255,255,0.1); */
    }
    .content__item {
        width: 1000px;
        max-width: 70vw;
        margin: 30vw auto;
        /* background-color: rgba(255,255,255,0.1); */
        text-align: left;
        margin-right: 0;
        position: relative;
        padding-top: 7vw;
    }
    .content__item:nth-child(even) {  /* even == 짝수만 선택 */
        margin-left: 0;
        text-align: right;
    }
    .content__item__num {
        font-size: 35vw;
        font-family: 'Lato';
        font-weight: 100;
        position: absolute;
        left: -5vw;
        top: -16vw;
        opacity: 0.07;
        z-index: -2;
    }
    .content__item:nth-child(even) .content__item__num {
        left: auto;
        right: -5vw;
    }
    .content__item__title {
        font-weight: 400;
        text-transform: capitalize;
    }
    .content__item__imgWrap {
        width: 100%;
        padding-bottom: 56.25%;
        background: #000;
        position: relative;
        overflow: hidden;
        z-index: -1;
    }
    .content__item__img {
        position: absolute;
        background-image: url(../assets/img/effect_bg10.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        width: 110%;
        height: 110%;
        left: -5%;
        top: -5%;
        filter: saturate(0%);
        transition: all 1s;
    }
    .content__item:nth-child(1) .content__item__img {
        background-image: url(../assets/img/effect_bg10.jpg);
    }
    .content__item:nth-child(2) .content__item__img {
        background-image: url(../assets/img/effect_bg09.jpg);
    }
    .content__item:nth-child(3) .content__item__img {
        background-image: url(../assets/img/effect_bg08.jpg);
    }
    .content__item:nth-child(4) .content__item__img {
        background-image: url(../assets/img/effect_bg07.jpg);
    }
    .content__item:nth-child(5) .content__item__img {
        background-image: url(../assets/img/effect_bg06.jpg);
    }
    .content__item:nth-child(6) .content__item__img {
        background-image: url(../assets/img/effect_bg05.jpg);
    }
    .content__item:nth-child(7) .content__item__img {
        background-image: url(../assets/img/effect_bg04.jpg);
    }
    .content__item:nth-child(8) .content__item__img {
        background-image: url(../assets/img/effect_bg03.jpg);
    }
    .content__item:nth-child(9) .content__item__img {
        background-image: url(../assets/img/effect_bg02.jpg);
    }

    .content__item__desc {
        font-size: 4vw;
        line-height: 1.4;
        margin-top: -5vw;
        margin-left: -4vw;
        word-break: keep-all;
    }
    .content__item:nth-child(even) .content__item__desc {
        margin-left: auto;
        margin-right: -4vw;
    }

    #parallax__info {
        position: fixed;
        left: 20px;
        bottom: 20px;
        z-index: 2000;
        background: rgba(0,0,0,0.4);
        color: #fff;
        padding: 20px 30px;
        border-radius: 10px;
    }
    #parallax__info li, .scrollTop {
        line-height: 1.4;
    }

    /* 반응형 */
    @media (max-width: 800px) {
        #parallax__cont {
            margin-top: 70vw;
        }
        #parallax__nav {
            padding: 10px;
            right: auto;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            border-radius: 5px;
            background-color: rgba(0,0,0,0.8);
        }
        #parallax__nav li {
            display: block;
            margin: 5px;
        }
        #parallax__nav li a {
            font-size: 14px;
            padding: 5px;
            border-radius: 5px;
            height: auto;
            line-height: 1;
        }
        #parallax__nav li.active a {
            border-radius: 5px;
        }
        #parallax__info {
            left: 10px;
            bottom: 10px;
        }
    }
</style>

이미지 설명으로 한 눈에 보기

결과

원본(HTML/JS) 소스 보기

CSS 소스 보기

원본 사이트 바로가기

'Effect > Parallax Effect' 카테고리의 다른 글

[Parallax Effect] 패럴럭스 이펙트 06 (2)	2022.09.29
[Parallax Effect] 패럴럭스 이펙트 05 - 이질감 효과 (10)	2022.09.20
[Parallax Effect] 패럴럭스 이펙트 04 - 부드럽게 나타내기 (5)	2022.09.18
[Parallax Effect] 패럴럭스 이펙트 03 - 메뉴바 숨겼다 나타나게 하기 & TOP 버튼 (6)	2022.09.09
[Parallax Effect] 패럴럭스 이펙트 02 - 사이드바 (6)	2022.09.08

코딩공책📚

[Parallax Effect] 패럴럭스 이펙트 01

패럴럭스 이펙트 01

HTML 소스

JS 소스 : scrollTop값 구하기 / active 효과 작동시키기

JS 소스 : 스크롤 이동 효과

CSS 소스

이미지 설명으로 한 눈에 보기

결과

'Effect > Parallax Effect' 카테고리의 다른 글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바

[Parallax Effect] 패럴럭스 이펙트 01

패럴럭스 이펙트 01

HTML 소스

JS 소스 : scrollTop값 구하기 / active 효과 작동시키기

JS 소스 : 스크롤 이동 효과

CSS 소스

이미지 설명으로 한 눈에 보기

결과

'Effect > Parallax Effect' 카테고리의 다른 글

관련글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바