[Parallax Effect] 패럴럭스 이펙트 07

패럴럭스 이펙트 07

이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 패럴럭스(parallax, 패럴랙스) 이펙트를 만들어보도록 하겠습니다. 먼저 parallax란, '시차(視差)'라는 의미를 가진 천문학 용어이며, 이번 포스팅에서 내비게이션 바에서 특정 섹션으로 가는 버튼을 누르면 해당 섹션으로 시차를 두고 스무스하게 이동시켜 주는 효과를 만들어보고자 합니다.

이번 패럴럭스 이펙트 07에서는 리빌(reveal) 효과 애니메이션을 주겠습니다.

HTML 소스

애니메이션을 주고자 하는 이미지와 텍스트 영역에 reveal 클래스값을 준다.

· reveal-RTL : 우측에서 좌측으로 리빌 효과
· reveal-TTB : 상단에서 하단으로 리빌 효과
· reveal-BTT : 하단에서 상단으로 리빌 효과
· reveal-TWO : 두 가지 애니메이션을 동시에 줌

<body class="img10">
    <header id="header">
        <h1>JAVASCRIPT PARALLAX EFFECT 07</h1>
        <p>패럴럭스 이펙트 - 리빌 효과</p>
        <ul>
            <li><a href="parallaxEffect01.html">01</a></li>
            <li><a href="parallaxEffect02.html">02</a></li>
            <li><a href="parallaxEffect03.html">03</a></li>
            <li><a href="parallaxEffect04.html">04</a></li>
            <li><a href="parallaxEffect05.html">05</a></li>
            <li><a href="parallaxEffect06.html">06</a></li>
            <li class="active"><a href="parallaxEffect07.html">07</a></li>
        </ul>
    </header>
    <!-- //header -->

    <nav id="parallax__nav">
        <ul>
            <li class="active"><a href="#section1">메뉴1</a></li>
            <li><a href="#section2"><span>메뉴2</span></a></li>
            <li><a href="#section3"><span>메뉴3</span></a></li>
            <li><a href="#section4"><span>메뉴4</span></a></li>
            <li><a href="#section5"><span>메뉴5</span></a></li>
            <li><a href="#section6"><span>메뉴6</span></a></li>
            <li><a href="#section7"><span>메뉴7</span></a></li>
            <li><a href="#section8"><span>메뉴8</span></a></li>
            <li><a href="#section9"><span>메뉴9</span></a></li>
        </ul>
    </nav>
    <!-- //parallax__nav -->

    <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">결과도 중요하지만, 과정을 더 중요하게 생각한다.</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 reveal reveal-RTL">
                    <div class="content__item__img"></div>
                </figure>
                <p class="content__item__desc reveal reveal-RTL">인생에서 많은 패배에 직면하겠지만 결코 패배하지 말라.</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 reveal reveal-TTB">
                    <div class="content__item__img"></div>
                </figure>
                <p class="content__item__desc reveal reveal-TTB">“내 너 그럴 줄 알았다” 알았으면 제발 미리 말 해줘라.</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 reveal reveal-BTT">
                    <div class="content__item__img"></div>
                </figure>
                <p class="content__item__desc reveal reveal-BTT">늦었다고 생각할 때가 진짜 너무 늦었다.</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 reveal reveal-TWO">
                    <div class="content__item__img"></div>
                </figure>
                <p class="content__item__desc reveal reveal-TWO">즐길 수 없으면 피하라.</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 reveal reveal-TWO reveal-RTL">
                    <div class="content__item__img"></div>
                </figure>
                <p class="content__item__desc reveal reveal-TWO reveal-RTL">생활은 과감한 모험이거나 아니면 아무것도 아니다.</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 reveal reveal-TWO reveal-TTB">
                    <div class="content__item__img"></div>
                </figure>
                <p class="content__item__desc reveal reveal-TWO reveal-TTB">어려운 길은 길이 아니다.</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">잠을 자도 피로가 안 풀리냐.</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 reveal">
                    <div class="content__item__img"></div>
                </figure>
                <p class="content__item__desc reveal">인생은 위대한 모험이거나 아니면 아무것도 아니다.</p>
            </section>
            <!-- //section9 -->
        </div>
    </main>
    <!-- //main -->

    <aside id="parallax__info">
        <div class="scroll">scrollTop : <span>0</span>px</div>
    </aside>
    <!-- //parallax__info -->

    <footer id="footer">
        <div class="modal__wrap">
        </div>
    </footer>
    <!-- //footer -->
</body>

CSS 소스

패럴럭스 효과에만 적용되는 CSS 소스이다. 공통/초기화 부분 CSS는 하단의 CSS 소스 보기 버튼을 눌러 확인할 것. reveal 효과는 /* option */ 항목을 참조할 것. 키프레임을 만들어서 animation 태그에 연결시켜주는 작업을 했다.

<style>
    /* parallax__nav */
    #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.1); */
        text-align: left;
        margin-right: 0;
        position: relative;
        padding-top: 7vw;
    }
    .content__item:nth-child(even) {  /* 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-image: url(../assets/img/effect_bg10.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_bg10.jpg);
    }
    .content__item:nth-child(2) .content__item__img {
        background-image: url(../assets/img/effect_bg09.jpg);
    }
    .content__item:nth-child(3) .content__item__img {
        background-image: url(../assets/img/effect_bg08.jpg);
    }
    .content__item:nth-child(4) .content__item__img {
        background-image: url(../assets/img/effect_bg07.jpg);
    }
    .content__item:nth-child(5) .content__item__img {
        background-image: url(../assets/img/effect_bg06.jpg);
    }
    .content__item:nth-child(6) .content__item__img {
        background-image: url(../assets/img/effect_bg05.jpg);
    }
    .content__item:nth-child(7) .content__item__img {
        background-image: url(../assets/img/effect_bg04.jpg);
    }
    .content__item:nth-child(8) .content__item__img {
        background-image: url(../assets/img/effect_bg03.jpg);
    }
    .content__item:nth-child(9) .content__item__img {
        background-image: url(../assets/img/effect_bg02.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;
    }

    /* info */
    #parallax__info {
        position: fixed;
        left: 20px;
        bottom: 20px;
        z-index: 2000;
        background: rgba(0,0,0,0.4);
        color: #fff;
        padding: 20px 30px;
        border-radius: 10px;
    }
    #parallax__info li, .scrollTop {
        line-height: 1.4;
    }

    /* option */
    .reveal > div,
    .reveal > span {
        opacity: 0;
    }
    .reveal.show > div {
        animation: opacity 1s linear forwards;
    }
    .reveal.show > span {
        opacity: 1;
    }
    .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;}
        50%     {width: 100%;  height: 100%;  top: 0;}
        80%     {width: 100%;  height: 100%;  top: 0;}
        100%    {width: 100%;  height: 0;     top: 100%;}
    }
    @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;}
    }

    .content__item__num { display: none; }
    .content__item__title { display: none; }

    /* 반응형 */
    @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;
        }
    }
</style>

JS 소스

reveal 클래스 자식에 글씨가 있는 경우 그 글씨를 span 태그로 감싸도록 스크립트를 짜고, 스크롤 값이 섹션 영역에 도달했을 경우 show 클래스값을 붙여 리빌 효과를 주도록 스크립트를 짰다.

<script>
    const revealText = document.querySelectorAll(".reveal");

    // reveal 클래스 자식에 글씨가 있는 경우, 가상으로 span 태그를 만들어서 넣기
    revealText.forEach((el)=>{
        let splitText = el.innerText;           

        // console.log(splitText)
        if(splitText){
            el.innerHTML = '<span>' + splitText + '</span>';
        }
    });  
    
    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/2){
            //     el.classList.add("show");     // 스크롤 위치가 영역에 도달할 시 show 붙여주기
            // }

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

        requestAnimationFrame(scroll);
    }
    scroll();
</script>

결과

원본(HTML/JS) 소스 보기

CSS 소스 보기

원본 사이트 바로가기

'Effect > Parallax Effect' 카테고리의 다른 글

[Parallax Effect] 패럴럭스 이펙트 06 (2)	2022.09.29
[Parallax Effect] 패럴럭스 이펙트 05 - 이질감 효과 (10)	2022.09.20
[Parallax Effect] 패럴럭스 이펙트 04 - 부드럽게 나타내기 (5)	2022.09.18
[Parallax Effect] 패럴럭스 이펙트 03 - 메뉴바 숨겼다 나타나게 하기 & TOP 버튼 (6)	2022.09.09
[Parallax Effect] 패럴럭스 이펙트 02 - 사이드바 (6)	2022.09.08

코딩공책📚

[Parallax Effect] 패럴럭스 이펙트 07

패럴럭스 이펙트 07

HTML 소스

CSS 소스

JS 소스

결과

'Effect > Parallax Effect' 카테고리의 다른 글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바

[Parallax Effect] 패럴럭스 이펙트 07

패럴럭스 이펙트 07

HTML 소스

CSS 소스

JS 소스

결과

'Effect > Parallax Effect' 카테고리의 다른 글

관련글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바