parallaxEffect01

section1

한번의 실패와 영원한 실패를 혼동하지 마라

section2

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

section3

하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다.

section4

행복은 습관이다,그것을 몸에 지니라

section5

만약 우리가 할 수 있는 일을 모두 한다면 우리들은 우리자신에 깜짝 놀랄 것이다.

section6

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

section7

겨울이 오면 봄이 멀지 않으리

section8

자신감 있는 표정을 지으면 자신감이 생긴다.

section9

길을 잃는 다는 것은 곧 길을 알게 된다는 것이다.

소스 보기

Javascript

HTML

CSS

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 || window.scrollY || document.documentElement.scrollTop;

    // for문
    // for (let i = 1; i <= 9; i++) {
    //     if (scrollTop + 1 >= 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문
    // Array.from(Array(9).keys(), x => x+1).forEach((el,index) => {
    //     if (scrollTop + 1 >= document.getElementById(`section${index + 1}`).offsetTop) {
    //         document.querySelectorAll('#parallax__nav li').forEach((li) => {
    //             li.classList.remove('active');
    //         });
    //         document.querySelector(`#parallax__nav li:nth-child(${index + 1})`).classList.add('active');
    //     }
    // });

    // forEach문 02
    document.querySelectorAll(".content__item").forEach((element, index) => {
        if (scrollTop >= element.offsetTop - 1) {
            document.querySelectorAll("#parallax__nav li").forEach((li) => {
                li.classList.remove("active");
            });
            document.querySelector(`#parallax__nav li:nth-child(${index + 1})`).classList.add("active");
        }
    });

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

<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">하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다.</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__nav */
#parallax__nav {
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 2000;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 20px 35px;
    border-radius: 50px;
}

#parallax__nav li {
    display: inline;
    margin: 0 5px;
}

#parallax__nav li a {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 5px 20px;
    text-align: center;
}

#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 {
    position: relative;
    width: 1000px;
    max-width: 70vw;
    margin: 30vw auto;
    text-align: left;
    margin-right: 0;
    padding-top: 10vw;
    /* background-color: rgba(255, 255, 255, 0.3); */
}

.content__item:nth-child(even) {
    margin-left: 0;
    text-align: right;
}

.content__item__num {
    position: absolute;
    left: -5vw;
    top: -13vw;
    opacity: 0.07;
    font-size: 35vw;
    font-family: Lato;
    font-weight: 100;
    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 {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
    background: #000;
    z-index: -1;
}

.content__item__img {
    position: absolute;
    background: url(../asset/img/effect_img01.jpg) no-repeat center / 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_bg03.jpg) no-repeat center / cover;
}
.content__item:nth-child(2) .content__item__img {
    background: url(../assets/img/effect_bg01.jpg) no-repeat center / cover;
}

.content__item:nth-child(3) .content__item__img {
    background: url(../assets/img/effect_bg02.jpg) no-repeat center / cover;
}

.content__item:nth-child(4) .content__item__img {
    background: url(../assets/img/effect_bg04.jpg) no-repeat center / cover;
}

.content__item:nth-child(5) .content__item__img {
    background: url(../assets/img/effect_bg05.jpg) no-repeat center / cover;
}

.content__item:nth-child(6) .content__item__img {
    background: url(../assets/img/effect_bg06.jpg) no-repeat center / cover;
}

.content__item:nth-child(7) .content__item__img {
    background: url(../assets/img/effect_bg08.jpg) no-repeat center / cover;
}

.content__item:nth-child(8) .content__item__img {
    background: url(../assets/img/effect_bg10.jpg) no-repeat center / cover;
}

.content__item:nth-child(9) .content__item__img {
    background: url(../assets/img/effect_bg11.jpg) no-repeat center / cover;
}

.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) {
    #parallex__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__info {
        left: 10px;
        bottom: 10px;
    }
}