parallaxEffect01

section1

질병은 입을 쫓아 들어가고 화근은 입을 좇아 나온다.

section2

행복이란 타인을 행복하게 해주려는 데서 생기는 부산물이다.

section3

지혜는 듣는 데서 오고 후회는 말하는 데서 온다.

section4

오늘 할 수 있는 일에 전력을 다하라, 그러면 내일에는 한 걸음 더 진보한다.

section5

말을 많이 하는 것과 말을 잘하는 것은 다르다.

section6

탐욕은 일체를 얻고자 욕심내어서 도리어 모든 것을 잃어버린다.

section7

100권의 책에 쓰인 말보다, 한 가지 성실한 마음이 크게 사람을 움직인다.

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">지혜는 듣는 데서 오고 후회는 말하는 데서 온다.</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">100권의 책에 쓰인 말보다, 한 가지 성실한 마음이 크게 사람을
                움직인다.</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(../assets/img/effect_bg12-min.jpg) no-repeat center / cover;
            width: 110%;
            height: 110%;
            left: -5%;
            top: -5%;
            filter: saturate(0%);
            transition: all 1s;
        }

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

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

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

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

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

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

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

        .content__item:nth-child(9) .content__item__img {
            background: url(../assets/img/effect_bg20-min.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;
            }
        }