Parallax 01

페럴랙스 이펙트 01

이번 시간에는 페럴랙스 형태를 가진 이펙트를 코딩해봤습니다.

HTML

사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다.
각 태그에 클래스 이름을 설정하여 각 구역을 잡아줍니다.

코드보기

    <header id="header">
        <h1>Javascript Mouse Effect01</h1>
        <p>패럴렉스 이펙트 - 메뉴 이동</p>
        <ul>
            <li class="active"><a href="parallaxEffect01.html">1</a></li>
            <li><a href="parallaxEffect02.html">2</a></li>
            <li><a href="parallaxEffect03.html">3</a></li>
            <li><a href="parallaxEffect04.html">4</a></li>
            <li><a href="parallaxEffect05.html">5</a></li>
            <li><a href="parallaxEffect06.html">6</a></li>
            <li><a href="parallaxEffect07.html">7</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>
    <!-- //nav -->

    <main id="parallax__cont">
        <div id="contents">
            <!-- section1 -->
            <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>

            <!-- section2 -->
            <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>

            <!-- section3 -->
            <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>

            <!-- section4 -->
            <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>

            <!-- section5 -->
            <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>

            <!-- section6 -->
            <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>

            <!-- section7 -->
            <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>

            <!-- section8 -->
            <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>

            <!-- section9 -->
            <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>
        </div>
        <section id="parallaxType">
        </section>
    </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>
    <!-- aside -->

CSS

사이트를 코딩하는 데에 필요한 css의 구조를 잡아줍니다.
각 이미지를 지정하기 위해 nth-child를 사용하여 각각의 이미지를 삽입해줍니다.

코드 보기

    /* 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.3); */
        text-align: left;
        margin-right: 0;
        position: relative;
        padding-top: 13vw;
    }
    .content__item:nth-child(even) {
        margin-left: 0;
        text-align: right;
    }
    .content__item__num {
        font-size: 35vw;
        font-family: "Lato";
        font-weight: 100;
        position: absolute;
        left: -5vw;
        top: -10vw;
        opacity: 0.2;
        z-index: -2;
    }
    .content__item:nth-child(even) .content__item__num {
        left: auto;
        right: -5vw;
    }
    .content__item__title {
        font-weight: 500;
        text-transform: capitalize;
    }
    .content__item__imgWrap {
        width: 100%;
        padding-bottom: 56.25%;
        background-color: #fff;
        position: relative;
        overflow: hidden;
        z-index: -1;
    }
    .content__item__img {
        position: absolute;
        background: url(../assets/img/slide10.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/slide01.jpg);
    }
    .content__item:nth-child(2) .content__item__img {
        background-image: url(../assets/img/slide02.jpg);
    }
    .content__item:nth-child(3) .content__item__img {
        background-image: url(../assets/img/slide03.jpg);
    }
    .content__item:nth-child(4) .content__item__img {
        background-image: url(../assets/img/slide04.jpg);
    }
    .content__item:nth-child(5) .content__item__img {
        background-image: url(../assets/img/slide05.jpg);
    }
    .content__item:nth-child(6) .content__item__img {
        background-image: url(../assets/img/slide06.jpg);
    }
    .content__item:nth-child(7) .content__item__img {
        background-image: url(../assets/img/slide07.jpg);
    }
    .content__item:nth-child(8) .content__item__img {
        background-image: url(../assets/img/slide08.jpg);
    }
    .content__item:nth-child(9) .content__item__img {
        background-image: url(../assets/img/slide09.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.6);
        color: #fff;
        padding: 20px;
        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.4;
        }
        #parallax__nav li.active a {
            border-radius: 10px;
        }
        #parallax__info {
            left: 10px;
            bottom: 10px;
        }
    }

script

노가다성이 느껴지는 코드 작성을 하지 않기 위해서 forEach문을 사용해주며,
forEach 사용 방법은 .content__item의 값들을 불러오기 위해 querySelectorAll사용해주고, element, index을 지정해줍니다.
그리고 출력 값을 정해준 뒤, remove와 add를 사용해서 active 효과가 겹치지 않고 각각의 작동하도록 만듭니다.
scrollTop의 값을 알기 위해 scrollTop, scrollY, document.documentElement.scrollTop메서드를 사용해줍니다.

scrollTop은 개별적으로 사용하는 방법이 있지만, || 를 이용해 여러가지를 한번에 사용할 수도 있다.
scrollIntoView() : 스크롤 이동 및 설정하는 메서드
behavior: "smooth"는 이동시에 부드럽게 이동하도록 설정할 수 있다.

코드 보기

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

    window.addEventListener("scroll", () => {
        // let scrollTop = window.pageYOffset;                                   // 첫 번째 방법
        // let scrollTop = window.scrollY;                                            // 두 번째 방법
        // let scrollTop = document.documentElement.scrollTop;      // 세 번째 방법
        let scrollTop = window.pageYOffset || indow.scrollY || document.documentElement.scrollTop;

        // 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
        document.querySelector(".scroll span").innerText = Math.round(scrollTop);

        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"
            });
        })
    })

코드 원본 보기

결과물

원본 사이트 보기