패럴랙스 이펙트01

section1

내일은 내일의 태양이 뜬다.

section2

삶이 있는 한 희망은 있다.

section3

먼저 자신을 비웃어라, 다른 사람이 당신을 비웃기 전에.

section4

평생 살 것처럼 꿈을 꾸어라, 그리고 내일 죽을 것처럼 오늘을 살아라.

section5

꿈을 계속 간직하고 있으면 반드시 실현할 때가 온다.

section6

고개 숙이지 마십시오. 세상을 똑바로 정면으로 바라보십시오.

section7

신을 내보여라, 그러면 재능이 드러날 것이다.

section8

최고에 도달하려면 최저에서 시작하라.

section9

인생을 다시 산다면 다음번에는 더 많은 실수를 저지르리라.

소스 보기

Javascript

HTML

CSS

window.addEventListener("scroll", () => {
    // let scrollTop = window.pageYOffset;
    // let scrollTop = window.scrollY;
    // let scrollTop = document.documentElement.scrollTop;
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;

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

    //forEach문
    document.querySelectorAll(".content__item").forEach((el, i) => {
        if (scrollTop >= el.offsetTop) {
            document.querySelectorAll("#parallax__nav li").forEach(li => {
                li.classList.remove("active");
            });
            document.querySelector("#parallax__nav li:nth-child(" + (i + 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"
        });
    });
});

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

/* parallaxType */
/* 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: 7vw;
}

.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: -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: url(../assets/img/effect_bg11-min.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: url(../assets/img/effect_bg11-min.jpg);
}

.content__item:nth-child(2) .content__item__img {
    background: url(../assets/img/effect_bg12-min.jpg);
}

.content__item:nth-child(3) .content__item__img {
    background: url(../assets/img/effect_bg13-min.jpg);
}

.content__item:nth-child(4) .content__item__img {
    background: url(../assets/img/effect_bg09-min.jpg);
}

.content__item:nth-child(5) .content__item__img {
    background: url(../assets/img/effect_bg15-min.jpg);
}

.content__item:nth-child(6) .content__item__img {
    background: url(../assets/img/effect_bg16-min.jpg);
}

.content__item:nth-child(7) .content__item__img {
    background: url(../assets/img/effect_bg17-min.jpg);
}

.content__item:nth-child(8) .content__item__img {
    background: url(../assets/img/effect_bg18-min.jpg);
}

.content__item:nth-child(9) .content__item__img {
    background: url(../assets/img/effect_bg19-min.jpg);
}

.content__item__desc {
    font-size: 4vw;
    line-height: 1.4;
    margin-top: -4vw;
    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,
.scroll {
    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;
    }
}