패럴렉스 이펙트 07

예제/페럴랙스 이펙트

패럴렉스 이펙트 07_리빌효과

아라라_ 2023. 5. 17. 23:51

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

Frederick Philips Brooks

Mythical Man-Month 저자

728x90

html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/parallax.css">
    <style>
        .reveal > div,
        .reveal > span {
            opacity: 0;
        }
        .reveal.show > div,
        .reveal.show > span {
            animation: opacity 1s linear forwards;
        }
        .reveal {
            position: relative;
        }
        .reveal::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 100%;
            background-color: #fff;
            z-index: 1;
        }
        .reveal.reveal-TWO::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 100%;
            z-index: 1;
            background-color: rgb(200, 255, 98);
        }
        /* 1개 */
        .reveal.show::before {
            animation: reveal 1s cubic-bezier(0, 0.78, 0.58, 1);
        }
        .reveal.reveal-RTL.show::before {
            animation: reveal-RTL 1s cubic-bezier(0, 0.78, 0.58, 1);
        }
        .reveal.reveal-TTB.show::before {
            animation: reveal-TTB 1s cubic-bezier(0, 0.78, 0.58, 1);
        }
        .reveal.reveal-BTT.show::before {
            animation: reveal-BTT 1s cubic-bezier(0, 0.78, 0.58, 1);
        }
        /* 2개 */
        .reveal.show::after {
            animation: reveal 1s 0.5s cubic-bezier(0, 0.78, 0.58, 1);
        }
        .reveal.reveal-RTL.show::after {
            animation: reveal-RTL 1s 0.5s cubic-bezier(0, 0.78, 0.58, 1);
        }
        .reveal.reveal-TTB.show::after {
            animation: reveal-TTB 1s 0.5s cubic-bezier(0, 0.78, 0.58, 1);
        }
        .reveal.reveal-BTT.show::after {
            animation: reveal-BTT 1s 0.5s cubic-bezier(0, 0.78, 0.58, 1);
        }
        /* animation */
        @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;    left: auto; right: 0;}
            50%  {width: 100%; left: auto; right: 0;}
            80%  {width: 100%; left: auto; right: 0;}
            100% {width: 0;    left: auto; right: 100%;}
        }
        @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;}
        }
        .parallax__item__num,
        .parallax__item__title {
            display: none;
        }
    </style>
</head>
<body class="">
    <header id="header">
        <h1>Javascript parallax Effect07</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><a href="parallaxEffect04.html">4</a></li>
            <li><a href="parallaxEffect05.html">5</a></li>
            <li class="active"><a href="parallaxEffect06.html">6</a></li>
            <li><a href="parallaxEffect07.html">7</a></li>

        </ul>

    </header>
    <!-- //header -->

    <main id="main">
        <div id="parallax__wrap">
            <section id="section1" class="parallax__item">
                <span class="parallax__item__num">01</span>
                <h2 class="parallax__item__title">sectin1</h2>
                <figure class="parallax_item__imgWrap reveal">
                    <div class="parallax__item__img"></div>
                </figure>
                <p class="parallax__item__desc split reveal">결과도 중요하지만, 과정을 더 중요하게 생각한다.</p>
            </section>
            <!-- //section1 -->
            <section id="section2" class="parallax__item">
                <span class="parallax__item__num">02</span>
                <h2 class="parallax__item__title">sectin2</h2>
                <figure class="parallax_item__imgWrap reveal">
                    <div class="parallax__item__img"></div>
                </figure>
                <p class="parallax__item__desc split reveal">미래는 두려움의 존재가 아니라 우리가 개척해나아가야 할 존재이다.</p>
            </section>
            <!-- //section2 -->
            <section id="section3" class="parallax__item">
                <span class="parallax__item__num">03</span>
                <h2 class="parallax__item__title">sectin</h2>
                <figure class="parallax_item__imgWrap reveal reveal-RTL">
                    <div class="parallax__item__img"></div>
                </figure>
                <p class="parallax__item__desc split reveal reveal-RTL">모든 것이 현재에 달려 있다.</p>
            </section><!-- //section3 -->
            <section id="section4" class="parallax__item">
                <span class="parallax__item__num">04</span>
                <h2 class="parallax__item__title">sectin4</h2>
                <figure class="parallax_item__imgWrap reveal reveal-TTB">
                    <div class="parallax__item__img"></div>
                </figure>
                <p class="parallax__item__desc split reveal reveal-TTB">과거는 과거일 뿐 더 이상 돌아갈 수 없다.</p>
            </section><!-- //section4 -->
            <section id="section5" class="parallax__item">
                <span class="parallax__item__num">05</span>
                <h2 class="parallax__item__title">sectin5</h2>
                <figure class="parallax_item__imgWrap reveal reveal-BTT">
                    <div class="parallax__item__img"></div>
                </figure>
                <p class="parallax__item__desc split reveal reveal-BTT">현재에 느끼는 어떠한 감정도 과거에 존재했던 어느 한 시점에 영향을 미치지 못한다. </p>
            </section><!-- //section5 -->
            <section id="section6" class="parallax__item">
                <span class="parallax__item__num"  data-delay="1000">06</span>
                <h2 class="parallax__item__title"  data-delay="1000">sectin6</h2>
                <figure class="parallax_item__imgWrap reveal reveal-TWO">
                    <div class="parallax__item__img"></div>
                </figure>
                <p class="parallax__item__desc split reveal reveal-TWO">사람은 태어날 때 부터 꿈을 안고 태어난다.</p>
            </section><!-- //section6 -->
            <section id="section7" class="parallax__item">
                <span class="parallax__item__num"  data-delay="1000">07</span>
                <h2 class="parallax__item__title"  data-delay="1000">sectin7</h2>
                <figure class="parallax_item__imgWrap reveal reveal-TWO reveal-RTL">
                    <div class="parallax__item__img"></div>
                </figure>
                <p class="parallax__item__desc split reveal reveal-TWO reveal-RTL">현실에 잠시 묻혀있을 뿐이다. </p>
            </section><!-- //section7 -->
            <section id="section8" class="parallax__item">
                <span class="parallax__item__num" data-delay="1000">08</span>
                <h2 class="parallax__item__title" data-delay="1000">sectin8</h2>
                <figure class="parallax_item__imgWrap reveal reveal-TWO reveal-TTB">
                    <div class="parallax__item__img"></div>
                </figure>
                <p class="parallax__item__desc split reveal reveal-TWO reveal-TTB">아무 생각 없이 사는 인생은 바다에서 표류하는 쪽배와 같다. </p>
            </section><!-- //section8 -->
            <section id="section9" class="parallax__item">
                <span class="parallax__item__num"  data-delay="1000">09</span>
                <h2 class="parallax__item__title"  data-delay="1000">sectin9</h2>
                <figure class="parallax_item__imgWrap reveal reveal-TWO reveal-BTT">
                    <div class="parallax__item__img"></div>
                </figure>
                <p class="parallax__item__desc split reveal reveal-TWO reveal-BTT">꿈이 없는 사람은 아무 생명력이 없는 인형과 같다.</p>
            </section><!-- //section9 -->
        </div>
    </main>
    <aside class="parallax__info">
        <div class="scroll">scrollTop : <span>0</span>px</div>

    </aside>

    <footer id="footer">
        <a href="mailto:jo0132@naver.com">jo0132@naver.com</a>
    </footer>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
    <script>
        // 만약에 reveal 클래스를 추가하면 자식 요소에 spqn으로 감싸주세요



        // document.querySelectorAll("p.reveal").forEach((text)=>{
        //     let splitText = text.innerText;
        //     console.log(splitText);
        //     text.innerHTML = "<span>" + splitText + "</span>";
        // })

        let text = document.querySelectorAll("p.reveal");
        text.forEach(el => {
            el.innerHTML = `<span>${el.innerHTML}</span>`
        })

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

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

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

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

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

            document.querySelector(".scroll span").innerText = Math.round(scrollTop);
            requestAnimationFrame(scroll);
        }
        scroll();
    </script>
</body>
</html>

자바스크립트를 사용하여 페럴랙스(Parallax) 효과와 리빌(Reveal) 효과를 구현하고 있습니다.
페럴랙스 효과는 웹 페이지의 배경이나 요소들이 스크롤에 따라 다른 속도로 움직이는 효과를 말합니다. 이를 구현하기 위해 parallax__item 클래스가 적용된 각 섹션들을 사용하고 있습니다. 각 섹션은 번호, 제목, 이미지, 설명으로 구성되어 있습니다.
리빌 효과는 요소가 나타나는 애니메이션 효과를 말합니다. 해당 코드에서는 .reveal 클래스가 적용된 요소들이 스크롤되면 나타나는 효과를 구현하고 있습니다. 요소들은 초기에는 투명하게 설정되어 있고, 스크롤에 따라 나타나도록 애니메이션 효과를 적용합니다. 애니메이션 효과는 CSS의 @keyframes 규칙을 사용하여 정의되어 있습니다.
스크롤 위치를 감지하기 위해 scroll() 함수가 사용되고 있으며, requestAnimationFrame()을 사용하여 매 프레임마다 스크롤 위치를 업데이트하고 요소들을 나타내는 애니메이션을 처리합니다.
마지막으로, 페이지에는 GSAP(GreenSock Animation Platform) 라이브러리의 gsap.min.js 파일이 포함되어 있습니다. 이 라이브러리는 웹 애니메이션을 구현하기 위해 사용되는 인기 있는 자바스크립트 라이브러리 중 하나입니다.

현재글패럴렉스 이펙트 07_리빌효과

300x250

GIT 블로그

Loading data ...

공부, 코딩, 퀴즈이팩트, 배열, javascript, 변수, 객체, 연산자, CSS, html, while문, 퀴즈만들어보기, if문, for문, 시험, 자바스크립트시험, 랜덤메서드, 자바스크립트, 함수, 사이트만들기,

Today :
Yesterday :

일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

아라의 WWW

패럴렉스 이펙트 07_리빌효과

Frederick Philips Brooks

html

'예제/페럴랙스 이펙트'의 다른글

티스토리툴바

패럴렉스 이펙트 07_리빌효과

Frederick Philips Brooks

html

'예제/페럴랙스 이펙트'의 다른글

관련글

티스토리툴바