Animated Rainbow Nyan Cat
본문 바로가기
Effect/퍼럴랙스

패럴렉스 이펙트 07

by 이유나1 2022. 10. 10.
728x90
반응형

패럴랙스 이펙트 - 리빌 효과

원본 페이지 보기
원본 소스 보기

script 코드

 

 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();

CSS

코드 보기

 

  /* .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;
            }
        }

HTML

코드 보기

 

<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>
728x90

'Effect > 퍼럴랙스' 카테고리의 다른 글

패럴렉스 이펙트 06  (2) 2022.10.07
퍼럴랙스 이펙트 05  (2) 2022.09.20
퍼럴랙스 이펙트 04  (2) 2022.09.19
퍼럴랙스 이펙트 03  (3) 2022.09.12
퍼럴랙스 이펙트 02  (2) 2022.09.12

관련글

댓글

/

JA
/

HTML
/

CSS
광고준비중입니다.

티스토리툴바