패럴렉스 이펙트03

Top

section1

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

section2

피할수 없으면 즐겨라

section3

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

section4

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

section5

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

section6

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

section7

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

section8

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

section9

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

소스 보기

Javascript

HTML

CSS

{
    window.addEventListener("scroll", () => {
        let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop; //다써줌 브라우저 호환문제

        // 01
        // if(scrollTop > 0) {
        //   document.querySelector("#parallax__nav").classList.add("show");
        // } else {
        //   document.querySelector("#parallax__nav").classList.remove("show");
        // }

        // 02
        // top 버튼 보여주기/안보여주기
        if(scrollTop + window.innerHeight >= document.body.scrollHeight){
          document.querySelector("#parallax__top").classList.add("show");
        } else {
          document.querySelector("#parallax__top").classList.remove("show");
        }

        // top 버튼
        document.querySelector("#parallax__top").addEventListener("click", () => {
          window.scrollTo({left:0, top:0, behavior:"smooth"});
        });
        // 소수점 제거
        document.querySelector("#parallax__info span").innerText = Math.ceil(scrollTop);
      });


      // 03 트리거
      let nowScroll = true;
      let lastScroll = 0;

      function scrollProgress() {
        nowScroll = true;

        setInterval(() => {
          if(nowScroll) {
            nowScroll = false;
            hasScroll();
          }
        }, 300)
      }
      // scrollTop < lastScroll 스크롤 올리고있다.
      // scrollTop > lastScroll 스크롤 내리고있다.
      function hasScroll() {
        let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;

      // 스크롤을 올릴때 메뉴바를 보여주고, 내릴때 숨긴다.
        if(scrollTop < lastScroll) {
          document.querySelector("#parallax__nav").classList.add("show");
        } else {
          document.querySelector("#parallax__nav").classList.remove("show");
        }
        lastScroll = scrollTop;
      }

      window.addEventListener("scroll", scrollProgress);
}

{
    <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 -->
<div id="parallax__top">
    Top
</div>
<!--// parallax__top -->

<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>
</aside>
<!-- parallax__info -->
}

{
    #parallax__nav {
        position:fixed;
        right: 20px;
        top: -200px;
        z-index: 2000;
        background-color: rgba(0,0,0,0.4);
        padding: 20px 30px;
        border-radius: 50px;
        transition: top .4s ease;
    }
    #parallax__nav.show {
        top: 20px;
    }
    #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;
        }
    }
    #parallax__top {
        position: fixed;
        left: 50%;
        bottom: -200px;
        z-index: 10000;
        transform: translateX(-50%);
        width: 40px;
        height: 40px;
        background: rgba(0,0,0,0.4);
        text-align: center;
        line-height: 40px;
        color: #fff;
        border-radius: 50%;
        padding: 20px;
        cursor: pointer;
        transition: all 0.3s;
    }
    #parallax__top.show {
        bottom: 20px;
    }
    #parallax__top:hover {
        background: #fff;
        color: #000;
    }
}