패럴렉스 이펙트01

section1

결과도 중요하지만, 과정을 더 중요하게 생각한다.

section2

피할수 없으면 즐겨라

section3

승리하면 조금 배울 수 있고 패배하면 모든 것을 배울 수 있다

section4

과거를 지배하는 자가 마래를 지배하며 현재를 지배하는 자가 과거를 지배한다.

section5

세상은 고통으로 가득하지만 한편 그것을 이겨내는 일로도 가득차 있다

section6

가장 하기 힘든 일은 아무 일도 안하는 것이다

section7

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

section8

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

section9

끝을 맺기를 처음과 같이 하면 실패가 없다.

소스 보기

Javascript

HTML

CSS

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

    // 노가다 방식
    // 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");
    // }
    // if(scrollTop >= document.getElementById("section3").offsetTop){
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {
    //         li.classList.remove("active");
    //     });
    //     document.querySelector("#parallax__nav li:nth-child(3)").classList.add("active");
    // }
    // if(scrollTop >= document.getElementById("section4").offsetTop){
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {
    //         li.classList.remove("active");
    //     });
    //     document.querySelector("#parallax__nav li:nth-child(4)").classList.add("active");
    // }
    // if(scrollTop >= document.getElementById("section5").offsetTop){
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {
    //         li.classList.remove("active");
    //     });
    //     document.querySelector("#parallax__nav li:nth-child(5)").classList.add("active");
    // }
    // if(scrollTop >= document.getElementById("section6").offsetTop){
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {
    //         li.classList.remove("active");
    //     });
    //     document.querySelector("#parallax__nav li:nth-child(6)").classList.add("active");
    // }
    // if(scrollTop >= document.getElementById("section7").offsetTop){
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {
    //         li.classList.remove("active");
    //     });
    //     document.querySelector("#parallax__nav li:nth-child(7)").classList.add("active");
    // }
    // if(scrollTop >= document.getElementById("section8").offsetTop){
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {
    //         li.classList.remove("active");
    //     });
    //     document.querySelector("#parallax__nav li:nth-child(8)").classList.add("active");
    // }
    // if(scrollTop >= document.getElementById("section9").offsetTop){
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {
    //         li.classList.remove("active");
    //     });
    //     document.querySelector("#parallax__nav li:nth-child(9)").classList.add("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");
    //     }
    // }

    // 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" //부드럽게
        });
    });
});

{
    <body class="img10">
    <header id="header">
        <h1>Javascript  parallax Effect01</h1>
        <p>패럴렉스 이펙트</p>
        <ul>
            <li class="active"><a href="mouseEffect01.html">1</a></li>
            <li><a href="mouseEffect02.html">2</a></li>
            <li><a href="mouseEffect03.html">3</a></li>
            <li><a href="mouseEffect04.html">4</a></li>
            <li><a href="mouseEffect05.html">5</a></li>
            <li><a href="mouseEffect06.html">6</a></li>
            <li><a href="mouseEffect07.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>

    <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="infoTop">
            <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 -->
}

{
    /* 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-color: #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: 8vw;
    }
    .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_bg18-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;
        padding-top: 8vw;
    }
    .content__item:nth-child(1) .content__item__img {
        background-image: url(../assets/img/effect_bg14-min.jpg);
    }
    .content__item:nth-child(2) .content__item__img {
        background-image: url(../assets/img/effect_bg15-min.jpg);
    }
    .content__item:nth-child(3) .content__item__img {
        background-image: url(../assets/img/effect_bg16-min.jpg);
    }
    .content__item:nth-child(4) .content__item__img {
        background-image: url(../assets/img/effect_bg17-min.jpg);
    }
    .content__item:nth-child(5) .content__item__img {
        background-image: url(../assets/img/effect_bg18-min.jpg);
    }
    .content__item:nth-child(6) .content__item__img {
        background-image: url(../assets/img/effect_bg19-min.jpg);
    }
    .content__item:nth-child(7) .content__item__img {
        background-image: url(../assets/img/effect_bg01-min.jpg);
    }
    .content__item:nth-child(8) .content__item__img {
        background-image: url(../assets/img/effect_bg02-min.jpg);
    }
    .content__item:nth-child(9) .content__item__img {
        background-image: url(../assets/img/effect_bg03-min.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-color: rgba(0,0,0,0.4);
        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;

        }
        #parallax__nav li.active a {
            border-radius: 5px;
        }
        #parallax__info {
            left: 10px;
            bottom: 10px;
        }
    }
}