패럴랙스 이펙트04

section1

언제나 현재에 집중할수 있다면 행복할것이다.

section2

진정으로 웃으려면 고통을 참아야하며, 고통을 즐길 줄 알아야 한다.

section3

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

section4

계단을 밟아야 계단 위에 올라설수 있다.

section5

행복은 습관이다,그것을 몸에 지니라.

section6

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

section7

그대의 하루 하루를 그대의 마지막 날이라고 생각하라.

section8

작은 기회로 부터 종종 위대한 업적이 시작된다.

section9

최고에 도달하려면 최저에서 시작하라.

소스 보기

Javascript

HTML

CSS

//재귀함수(자기 자신을 호출)
    function scroll() {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.screenY;

        document.querySelectorAll(".content__item").forEach(item => {
            if (scrollTop > item.offsetTop - window.innerHeight / 2) {
                item.classList.add("show");
            }
        });

        requestAnimationFrame(scroll);  //브라우저에 최적화.1분에 60번 window.addEventListener("scroll", scrollProgress);
    }

    scroll();

<header id="header">
    <h1>Javascript parallax Effect03</h1>
    <p>패럴랙스 이펙트 - 나타내기</p>
    <ul>
        <li><a href="parallaxEffect01.html">1</a></li>
        <li><a href="parallaxEffect02.html">2</a></li>
        <li><a href="parallaxEffect03.html">3</a></li>
        <li class="active"><a href="parallaxEffect04.html">4</a></li>
        <li><a href="parallaxEffect05.html">5</a></li>
        <li><a href="parallaxEffect06.html">6</a></li>
        <li><a href="parallaxEffect07.html">7</a></li>
    </ul>
</header>
<!-- header -->

<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">1퍼센트의 가능성, 그것이 나의 길이다.</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>

/* parallaxType  */
    #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;
        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:nth-child(2n) {
        /* even, 2n+1, 2n*8 등등 가능 */
        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(2n) .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_bg05@2x-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/img/effect_bg11-min.jpg);
    }

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

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

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

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

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

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

    .content__item:nth-child(8) .content__item__img {
        background-image: url(../assets/img/effect_bg18-min.jpg);
    }

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

    @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;
        }
    }

    /* 한 번에 나타나기 */
    /* #contents>section {
        opacity: 0;
        transition: all 1s;
    }

    #contents>section.show {
        opacity: 1;
    } */

    /* 개별적으로 나타나기 */
    #contents>section .content__item__num {
        opacity: 0;
        transform: translateY(200px);
        transition: all 1s 0.1s cubic-bezier(0.09, 0.7, 0.58, 1);
    }

    #contents>section .content__item__title {
        opacity: 0;
        transform: translateX(-100px);
        transition: all 1s 0.3s cubic-bezier(0.09, 0.7, 0.58, 1);
    }

    #contents>section .content__item__imgWrap {
        opacity: 0;
        transform: translateY(200px) rotate(30deg) skew(20deg);
        transition: all 1s 0.6s cubic-bezier(0.09, 0.7, 0.58, 1);
    }

    #contents>section .content__item__desc {
        opacity: 0;
        transform: translateX(-200px);
        transition: all 1s 0.9s cubic-bezier(0.09, 0.7, 0.58, 1);
    }

    #contents>section.show .content__item__num {
        opacity: 0.07;
        transform: translateY(0);
    }

    #contents>section.show .content__item__title {
        opacity: 1;
        transform: translateX(0) rotate(0) skew(0);
    }

    #contents>section.show .content__item__imgWrap {
        opacity: 1;
        transform: translateY(0);
    }

    #contents>section.show .content__item__desc {
        opacity: 1;
        transform: translateX(0);
    }

    #contents>section:nth-child(even) .content__item__title {
        transform: translateX(100px);
    }

    #contents>section:nth-child(even).show .content__item__title {
        transform: translateX(0);
    }

    #contents>section:nth-child(even) .content__item__desc {
        transform: translateX(200px);
    }

    #contents>section:nth-child(even).show .content__item__desc {
        transform: translateX(0);
    }