패럴랙스 이펙트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;

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

    // offsetTop값 for문 이용해서 구하기
    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"
        });
    });
});
// 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;

<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="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 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;
        overflow: hidden;
        /* 깨질경우 전체를 감싸는 부분에 overflow: hidden; 넣어줌 */
        /* 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-family: "Lato";
        font-weight: 100;
        font-size: 35vw;
        position: absolute;
        left: -5vw;
        top: -13vw;
        opacity: 0.07;
        z-index: -2;
      }
      .content__item:nth-child(even) .content__item__num {
        left: auto;
        right: -5vw;
      }
      .content__item__title {
        font-weight: 700;
        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-color: rgba(0, 0, 0, 1);
        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;
        opacity: 0.7;
      }
      .content__item:nth-child(1) .content__item__img {
        background: url(../assets/img/effect_bg31.jpg) no-repeat center / cover;
      }
      .content__item:nth-child(2) .content__item__img {
        background: url(../assets/img/effect_bg22.jpg) no-repeat center / cover;
      }

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

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

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

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

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

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

      .content__item:nth-child(9) .content__item__img {
        background: url(../assets/img/effect_bg29.jpg) no-repeat center / cover;
      }
      .content__item__desc {
        font-size: 4vw;
        font-weight: 300;
        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-color: rgba(0, 0, 0, 0.4);
        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;
        }
      }