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

패럴렉스 이펙트 06

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

패럴랙스 이펙트 - 텍스트 효과

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

script 코드

  //글씨 쪼개기
        // let text = document.querySelector("#section01 .content__item__desc");
        // let splitText = text.innerText;

        // let splitWrap = splitText.split('').join('</span>'<span>');

        // text.innerHTML = splitWrap = "'<span>" + splitWrap + "'</span>";


        // 글씨 쪼개기(다중이)
        document.querySelectorAll(".split").forEach(text => {
            let splitText = text.innerText;
            let splitWrap = splitText.split('').join("'</span>'<span aria-hidden='true'>");
            splitWrap = "'<span>" + splitWrap + "'</span>";
            text.innerHTML = splitWrap;
            text.setAttribute("aria-label", splitText);
        });


        function scroll() {
            let scrollTop = window.scrollY;
            document.querySelector('.scroll span').innerText = Math.ceil(scrollTop);

            // CSS 클래스 추가 (노가다)
            // document.querySelectorAll(".content__item").forEach(item => {
            //     if(scrollTop >= item.offsetTop){
            //         item.querySelector(".split").classList.add("show");
            //     }
            // })

            document.querySelectorAll('.content__item').forEach((item) => {
                if (scrollTop >= item.offsetTop - 200) {
                    item.querySelector('.split').classList.add('show');
                    item.querySelectorAll('.split span').forEach((span, index) => {
                        // span.style.transitionDelay = `${index * 50}ms`;  //글씨효과 1
                        setTimeout(() => {
                            span.classList.add("show");
                        }, 50 * index);
                    }); //글씨 효과 2
                }
            });
            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%;
            background: #000;
            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 {
            position: fixed;
            left: 20px;
            bottom: 20px;
            z-index: 2000;
            background: 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: 10px;
                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;
            }
        }

        /* option */
        /* .split span {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.6s ease-in-out;
            display: inline-block;
            min-width: 1vw;
        }

        .split.show span {
            opacity: 1;
            transform: translateY(0);
        } */

        /* .split span:nth-child(1) {
            transition-delay: 100ms;
        }

        .split span:nth-child(2) {
            transition-delay: 150ms;
        }

        .split span:nth-child(3) {
            transition-delay: 200ms;
        }

        .split span:nth-child(4) {
            transition-delay: 250ms;
        }

        .split span:nth-child(5) {
            transition-delay: 300ms;
        }

        .split span:nth-child(6) {
            transition-delay: 350ms;
        }

        .split span:nth-child(7) {
            transition-delay: 400ms;
        }

        .split span:nth-child(8) {
            transition-delay: 450ms;
        }

        .split span:nth-child(9) {
            transition-delay: 500ms;
        }

        .split span:nth-child(10) {
            transition-delay: 550ms;
        }

        .split span:nth-child(11) {
            transition-delay: 600ms;
        }

        .split span:nth-child(12) {
            transition-delay: 650ms;
        }

        .split span:nth-child(13) {
            transition-delay: 700ms;
        }

        .split span:nth-child(14) {
            transition-delay: 750ms;
        }

        .split span:nth-child(15) {
            transition-delay: 800ms;
        }

        .split span:nth-child(16) {
            transition-delay: 850ms;
        }

        .split span:nth-child(17) {
            transition-delay: 900ms;
        }

        .split span:nth-child(18) {
            transition-delay: 950ms;
        }

        .split span:nth-child(19) {
            transition-delay: 1000ms;
        }

        .split span:nth-child(20) {
            transition-delay: 1050ms;
        }

        .split span:nth-child(21) {
            transition-delay: 1100ms;
        }

        .split span:nth-child(22) {
            transition-delay: 1150ms;
        }

        .split span:nth-child(23) {
            transition-delay: 1200ms;
        }

        .split span:nth-child(24) {
            transition-delay: 1250ms;
        }

        .split span:nth-child(25) {
            transition-delay: 1300ms;
        }

        .split span:nth-child(26) {
            transition-delay: 1350ms;
        }

        .split span:nth-child(27) {
            transition-delay: 1400ms;
        }

        .split span:nth-child(28) {
            transition-delay: 1450ms;
        }

        .split span:nth-child(29) {
            transition-delay: 1500ms;
        }

        .split span:nth-child(30) {
            transition-delay: 1550ms;
        } */

        /* 순차적으로 나타나기 */
        .style1.split span {
            opacity: 0;
            min-width: 1vw;
            transition: all 0.3s ease-in-out;
        }

        .style1.split span.show {
            opacity: 1;
        }

        .style2.split span {
            opacity: 0;
            min-width: 1vw;
            transform: translateY(50px);
            display: inline-block;
            transition: all 0.3s ease-in-out;
        }

        .style2.split span.show {
            opacity: 1;
            transform: translateY(0);
        }

        .style3.split span {
            opacity: 0;
            min-width: 1vw;
            transform: translateY(50px) translatex(-130px) rotate(360deg);
            display: inline-block;
            transition: all 0.3s cubic-bezier(0, 0.28, 0, 1.2);
        }

        .style3.split span.show {
            opacity: 1;
            transform: translateY(0) translatex(0) rotate(0);
        }

        .style4.split span {
            opacity: 0;
            min-width: 1vw;
            display: inline-block;
        }

        .style4.split span.show {
            opacity: 1;
            animation: wobble 0.5s 1 ease-in forwards;
        }

        @keyframes wobble {
            0% {
                transform: translate3d(0, 0, 0);
                opacity: 0;
            }

            15% {
                transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
            }

            30% {
                transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
            }

            45% {
                transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
            }

            60% {
                transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
            }

            75% {
                transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
            }

            100% {
                transform: translate3d(0, 0, 0);
                opacity: 1;
            }
        }

        .style5.split span {
            display: inline-block;
            opacity: 0;
            min-width: 1vw;
        }

        .style5.split span.show {
            animation: flip 1s 1 ease-in forwards;
        }

        @keyframes flip {
            0% {
                transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
                animation-timing-function: ease-out;
                opacity: 0;
            }

            40% {
                transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
                animation-timing-function: ease-out;
            }

            50% {
                transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
                animation-timing-function: ease-in;
            }

            80% {
                transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
                animation-timing-function: ease-in;
            }

            100% {
                transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
                animation-timing-function: ease-in;
                opacity: 1;
            }
        }

        .style6.split span {
            display: inline-block;
            opacity: 0;
            min-width: 1vw;
        }

        .style6.split span.show {
            animation: pulse 1s 1 ease-in forwards;
        }

        @keyframes pulse {
            0% {
                opacity: 0;
                transform: scale3d(1, 1, 1);
            }

            50% {
                transform: scale3d(1.05, 1.05, 1.05);
            }

            100% {
                transform: scale3d(1, 1, 1);
                opacity: 1;
            }
        }

        .style7.split span {
            display: inline-block;
            opacity: 0;
            min-width: 1vw;
        }

        .style7.split span.show {
            animation: bounceInLeft 1s 1 ease-in forwards;
        }

        @keyframes bounceInLeft {

            0%,
            60%,
            75%,
            90%,
            100% {
                animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            }

            0% {
                opacity: 0;
                transform: translate3d(-3000px, 0, 0) scaleX(3);
            }

            60% {
                transform: translate3d(25px, 0, 0) scaleX(1);
            }

            75% {
                transform: translate3d(-10px, 0, 0) scaleX(0.98);
            }

            90% {
                transform: translate3d(5px, 0, 0) scaleX(0.995);
            }

            100% {
                transform: translate3d(0, 0, 0);
                opacity: 1;
            }
        }

        .style8.split span {
            opacity: 0;
            min-width: 1vw;
            display: inline-block;
        }

        .style8.split span.show {
            animation: lightSpeedInLeft 0.5s 1 ease-in forwards;
        }

HTML

코드 보기 

<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 split style1">직업에서 행복을 찾아라. 아니면 행복이 무엇인지 절대 모를 것이다 .</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">
            <div class="content__item__img"></div>
        </figure>
        <p class="content__item__desc split style2">행복한 삶을 살기위해 필요한 것은 거의 없다.</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">
            <div class="content__item__img"></div>
        </figure>
        <p class="content__item__desc split style3">한번의 실패와 영원한 실패를 혼동하지 마라.</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">
            <div class="content__item__img"></div>
        </figure>
        <p class="content__item__desc split style4">1퍼센트의 가능성, 그것이 나의 길이다. </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">
            <div class="content__item__img"></div>
        </figure>
        <p class="content__item__desc split style5">꿈을 계속 간직하고 있으면 반드시 실현할 때가 온다.</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">
            <div class="content__item__img"></div>
        </figure>
        <p class="content__item__desc split style6">오늘은 당신의 남은 인생 중, 첫 번째 날이다.</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">
            <div class="content__item__img"></div>
        </figure>
        <p class="content__item__desc split style7">나 자신에 대한 자신감을 잃으면 온 세상이 나의 적이 된다.</p>
    </section>
    <!-- section7 -->


    <section id="section8" class="content__item">
        <span class="content__item__num">08</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 split style8">고개 숙이지 마십시오. 세상을 똑바로 정면으로 바라보십시오.</p>
    </section>
    <!-- section8 -->
</div>
728x90

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

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

관련글

댓글

/

JA
/

HTML
/

CSS
광고준비중입니다.

티스토리툴바