패럴랙스 이펙트

section1

직업에서 행복을 찾아라. 아니면 행복이 무엇인지 절대 모를 것이다.

section1

행복한 삶을 살기위해 필요한 것은 거의 없다.

section1

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

section1

1퍼센트의 가능성, 그것이 나의 길이다.

section1

꿈을 계속 간직하고 있으면 반드시 실현할 때가 온다.

section1

오늘은 당신의 남은 인생 중, 첫 번째 날이다.

section1

나 자신에 대한 자신감을 잃으면 온 세상이 나의 적이 된다.

section8

고개 숙이지 마십시오. 세상을 똑바로 정면으로 바라보십시오.

소스 보기

HTML

CSS

Javascript

 <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 reveal">
    <div class="content__item__img"></div>
    </figure>
    <p class="content__item__desc reveal"><span>직업에서 행복을 찾아라. 아니면 행복이 무엇인지 절대 모를 것이다.</span></p>
    </section>
    <!-- section -->
    
    
    <section id="section2" class="content__item">
    <span class="content__item__num">02</span>
    <h2 class="content__item__title">section1</h2>
    <figure class="content__item__imgWrap reveal reveal-RTL">
    <div class="content__item__img"></div>
    </figure>
    <p class="content__item__desc reveal reveal-RTL" data-delay="500"><span>행복한 삶을 살기위해 필요한 것은 거의
    없다.</span>
    </p>
    </section>
    <!-- section2 -->
    
    
    <section id="section3" class="content__item">
    <span class="content__item__num">03</span>
    <h2 class="content__item__title">section1</h2>
    <figure class="content__item__imgWrap reveal reveal-TTB">
    <div class="content__item__img"></div>
    </figure>
    <p class="content__item__desc reveal reveal-TTB"><span>한번의 실패와 영원한 실패를 혼동하지 마라.</span></p>
    </section>
    <!-- section3 -->
    
    
    <section id="section4" class="content__item">
    <span class="content__item__num">04</span>
    <h2 class="content__item__title">section1</h2>
    <figure class="content__item__imgWrap reveal reveal-BTT" data-delay="1500">
    <div class="content__item__img"></div>
    </figure>
    <p class="content__item__desc reveal reveal-BTT"><span>1퍼센트의 가능성, 그것이 나의 길이다.</span> </p>
    </section>
    <!-- section4 -->
    
    <section id="section5" class="content__item">
    <span class="content__item__num">05</span>
    <h2 class="content__item__title">section1</h2>
    <figure class="content__item__imgWrap reveal reveal-TWO">
    <div class="content__item__img"></div>
    </figure>
    <p class="content__item__desc reveal reveal-TWO"><span>꿈을 계속 간직하고 있으면 반드시 실현할 때가 온다.</span></p>
    </section>
    <!-- section5 -->
    
    
    <section id="section6" class="content__item">
    <span class="content__item__num">06</span>
    <h2 class="content__item__title">section1</h2>
    <figure class="content__item__imgWrap reveal reveal-TWO reveal-RTL">
    <div class="content__item__img"></div>
    </figure>
    <p class="content__item__desc reveal reveal-TWO reveal-RTL"><span>오늘은 당신의 남은 인생 중, 첫 번째
    날이다.</span></p>
    </section>
    <!-- section6 -->
    
    
    <section id="section7" class="content__item">
    <span class="content__item__num">07</span>
    <h2 class="content__item__title">section1</h2>
    <figure class="content__item__imgWrap reveal reveal-TWO reveal-TTB">
    <div class="content__item__img"></div>
    </figure>
    <p class="content__item__desc reveal reveal-TWO reveal-TTB"><span>나 자신에 대한 자신감을 잃으면 온 세상이 나의 적이
    된다.</span></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 reveal reveal-TWO reveal-BTT">
    <div class="content__item__img"></div>
    </figure>
    <p class="content__item__desc reveal reveal-TWO reveal-BTT"><span>고개 숙이지 마십시오. 세상을 똑바로 정면으로
    바라보십시오.</span></p>
    </section>
    <!-- section8 -->
    </div>
    
    </main>

 /* .parallax__nav */
    #parallax__nav {
        position: fixed;
        right: 20px;
        top: 20px;
        z-index: 20000;
        background-color: rgba(0, 0, 0, 0.4);
        padding: 20px 30px;
        border-radius: 50px;
        transition: top .4s ease;
    }

    #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;
        /* 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: 7vw;
    }

    /*  .content__item 의 짝수만 선택 even , 2n = +,* 가능 */
    .content__item:nth-child(even) {
        margin-left: 0;
        text-align: right;
    }

    /* left 값 초기화 */
    .content__item:nth-child(even) .content__item__num {
        left: auto;
        right: -5vw;
    }

    .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__title {
        font-weight: 400;
        text-transform: capitalize;
    }

    /* 이미지가 넘쳐서 감춰줌 */
    .content__item__imgWrap {
        width: 100%;
        padding-bottom: 56.25%;
        position: relative;
        overflow: hidden;
        z-index: -1;
    }

    /* 실제 이미지 크기 */
    .content__item__img {
        position: absolute;
        background: url(../assets/img3/effect_bg01-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; */
    }

    .content__item:nth-child(1) .content__item__img {
        background-image: url(../assets/img3/effect_bg01-min.jpg);
    }

    .content__item:nth-child(2) .content__item__img {
        background-image: url(../assets/img3/effect_bg02-min.jpg);
    }

    .content__item:nth-child(3) .content__item__img {
        background-image: url(../assets/img3/effect_bg03-min.jpg);
    }

    .content__item:nth-child(4) .content__item__img {
        background-image: url(../assets/img3/effect_bg04-min.jpg);
    }

    .content__item:nth-child(5) .content__item__img {
        background-image: url(../assets/img3/effect_bg05-min.jpg);
    }

    .content__item:nth-child(6) .content__item__img {
        background-image: url(../assets/img3/effect_bg06-min.jpg);
    }

    .content__item:nth-child(7) .content__item__img {
        background-image: url(../assets/img3/effect_bg07-min.jpg);
    }

    .content__item:nth-child(8) .content__item__img {
        background-image: url(../assets/img3/effect_bg08-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 li,
    .scrollTop {
        line-height: 1.4;
    }

    /* option */
    .reveal>div,
    .reveal>span {
        opacity: 0;
    }

    .reveal>div,
    .reveal>span {
        animation: opacity 1s linear forwards;
    }


    .reveal {
        position: relative;
    }

    .reveal::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 100%;
        background: #fff;
        z-index: 1;
    }

    .reveal.reveal-TWO::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 100%;
        z-index: 1;
        background: orange;
    }

    /* 1개 */
    .reveal.show::before {
        animation: reveal 1s;
    }

    .reveal.reveal-RTL.show::before {
        animation: reveal_RTL 1s;
    }

    .reveal.reveal-TTB.show::before {
        animation: reveal_TTB 1s;
    }


    .reveal.reveal-BTT.show::before {
        animation: reveal_BTT 1s;
    }

    /* 2개 */
    .reveal.show::after {
        animation: reveal 1s 0.3s;
    }

    .reveal.reveal-RTL.show::after {
        animation: reveal-RTL 1s 0.3s;
    }

    .reveal.reveal-TTB.show::after {
        animation: reveal-TTB 1s 0.3s;
    }

    .reveal.reveal-BTT.show::after {
        animation: reveal-BTT 1s 0.3s;
    }

    @keyframes opacity {
        0% {
            opacity: 0;
        }

        60% {
            opacity: 0;
        }

        70% {
            opacity: 1;
        }

        100% {
            opacity: 1;
        }
    }

    /* 연출? */
    @keyframes reveal {
        0% {
            width: 0;
            left: 0;
        }

        50% {
            width: 100%;
            left: 0;
        }

        80% {
            width: 100%;
            left: 0;
        }

        100% {
            width: 0;
            left: 100%;
        }
    }

    @keyframes reveal_RTL {
        0% {
            width: 0;
            right: 0;
            left: auto;
        }

        50% {
            width: 100%;
            right: 0;
            left: auto;
        }

        80% {
            width: 100%;
            right: 0;
            left: auto;
        }

        100% {
            width: 0;
            right: 100%;
            left: auto;
        }
    }

    @keyframes reveal_TTB {
        0% {
            width: 100%;
            height: 0%;
            top: 0;
            bottom: 0;
        }

        50% {
            width: 100%;
            height: 100%;
            top: 0;
            bottom: 0;
        }

        80% {
            width: 100%;
            height: 100%;
            top: 0;
            bottom: 0;
        }

        100% {
            width: 100%;
            height: 0%;
            top: 100%;
            bottom: 0;
        }
    }

    @keyframes reveal-BTT {
        0% {
            width: 100%;
            height: 0%;
            bottom: 0;
            top: auto;

        }

        50% {
            width: 100%;
            height: 100%;
            bottom: 0;
            top: auto;
        }

        80% {
            width: 100%;
            height: 100%;
            bottom: 0;
            top: auto;
        }

        100% {
            width: 100%;
            height: 0%;
            bottom: 100%;
            top: auto;
        }
    }

   function scroll() {
    let scrollTop = window.scrollY;

    const reveal = document.querySelectorAll(".reveal");

    reveal.forEach(el => {
        let revealOffset = el.offsetTop + el.parentElement.offsetTop;
        let revealDelay = el.dataset.delay;

        // if (scrollTop > revealOffset - window.innerHeight) {
        //     el.classList.add("show");
        // }

        if (scrollTop >= revealOffset - window.innerHeight) {
            if (revealDelay == undefined) {
                el.classList.add("show");
            } else {
                setTimeout(() => {
                    el.classList.add("show");
                }, revealDelay)
            }
        }
    })

    // document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);
    requestAnimationFrame(scroll);
}
scroll();