Bomb Kirby Running

JAVASCRIPT

패럴랙스 이펙트 08, 09

^. ̫ .^ 2023. 5. 31. 23:44

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>패럴랙스 이펙트08</title>
        <link rel="stylesheet" href="css/reset.css" />
        <link rel="stylesheet" href="css/parallax.css" />
    </head>
    <body class="img01 bg01 Eulyoo">
        <header id="header">
            <h1>Javascript Parallax Effect08</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><a href="parallaxEffect06.html">6</a></li>
                <li><a href="parallaxEffect07.html">7</a></li>
                <li class="active"><a href="parallaxEffect08.html">8</a></li>
                <li><a href="parallaxEffect09.html">9</a></li>

            </ul>
        </header>
        <!-- header -->
        <main id="main">
            <div class="parallaxs__wrap">
                <section id="section1" class="parallaxs__item">
                    <span class="parallaxs__item__num">01</span>
                </section>
                <!--//section1-->
                <section id="section2" class="parallaxs__item">
                    <span class="parallaxs__item__num">02</span>
                </section>
                <!--//section2-->
                <section id="section3" class="parallaxs__item">
                    <span class="parallaxs__item__num">03</span>
                </section>
                <!--//section3-->
                <section id="section4" class="parallaxs__item">
                    <span class="parallaxs__item__num">04</span>
                </section>
                <!--//section4-->
                <section id="section5" class="parallaxs__item">
                    <span class="parallaxs__item__num">05</span>
                </section>
                <!--//section5-->
                <section id="section6" class="parallaxs__item">
                    <span class="parallaxs__item__num">06</span>
                </section>
                <!--//section6-->
                <section id="section7" class="parallaxs__item">
                    <span class="parallaxs__item__num">07</span>
                </section>
                <!--//section7-->
                <section id="section8" class="parallaxs__item">
                    <span class="parallaxs__item__num">08</span>
                </section>
                <!--//section8-->
                <section id="section9" class="parallaxs__item">
                    <span class="parallaxs__item__num">09</span>
                </section>
                <!--//section9-->
                <aside class="parallax__info">
                    <div class="scroll">scrollTop : <span>0</span>px</div>
                </aside>
                <!--//parallax__info-->
            </div>
        </main>
        <!-- //main -->
    </body>
</html>

CSS

#header {
    position: fixed;
    z-index: 10000;
}
.parallaxs__wrap {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
}
.parallaxs__item {
    width: 100vw;
    height: 100vh;
    position: relative;
}
#section1 {background-color: #111;}
#section2 {background-color: #222;}
#section3 {background-color: #333;}
#section4 {background-color: #444;}
#section5 {background-color: #555;}
#section6 {background-color: #666;}
#section7 {background-color: #777;}
#section8 {background-color: #888;}
#section9 {background-color: #999;}
.parallaxs__item__num {
    position: absolute;
    bottom: 20px;
    right: 20px;
    color: #fff;
    font-size: 10vw;
    z-index: 1000;
}

각 영역에 색을 넣어주고 가로로 나올 수 있게 해주었습니다.

SCRIPT

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
        <script>
            const parallaxCont = document.querySelector(".parallaxs__wrap");
            function scroll(){
                let scrollTop = window.pageYOffset;

                let parallaxWidth = parallaxCont.offsetWidth;
                document.body.style.height = parallaxWidth + "px";

                let viewWidth = parallaxWidth - window.innerWidth;
                let viewHeight = parallaxWidth - window.innerHeight;
                let goLeft = scrollTop * (viewWidth / viewHeight);

                gsap.to(parallaxCont, {left: -goLeft, ease: "power2.out"});

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

외부 라이브러리인 GSAP(GreenSock Animation Platform)를 가져오기 위한 <script> 태그를 사용하여 CDN 링크를 추가합니다

parallaxCont 변수를 사용하여 패럴랙스 효과를 적용할 요소를 선택합니다

scroll 함수를 정의합니다.

window.pageYOffset를 사용하여 현재 스크롤의 Y축 위치를 가져옵니다

parallaxCont 요소의 너비를 parallaxWidth 변수에 저장합니다

document.body.style.height를 사용하여 문서의 높이를 parallaxWidth로 스크롤 가능한 영역을 설정해줍니다.

parallaxWidth와 브라우저의 내부 너비(window.innerWidth)를 비교하여 뷰포트 너비에서 벗어난 양을 viewWidth 변수에 저장합니다

parallaxWidth와 브라우저의 내부 높이(window.innerHeight)를 비교하여 뷰포트 높이에서 벗어난 양을 viewHeight 변수에 저장합니다

scrollTop 값을 사용하여 이미지를 이동시킬 양을 계산합니다. 계산된 값은 goLeft 변수에 저장되며, viewWidth와 viewHeight를 이용하여 비율을 적용합니다

gsap.to를 사용하여 parallaxCont 요소를 애니메이션으로 이동시킵니다. 이동하는 양은 -goLeft이며, 이동에 "power2.out" 이징 함수를 적용합니다

document.querySelector(".scroll span").innerText를 사용하여 스크롤 위치를 업데이트합니다

requestAnimationFrame(scroll)을 사용하여 다음 프레임에서 scroll 함수를 호출합니다. 이로써 스크롤 이벤트가 발생할 때마다 애니메이션이 업데이트됩니다

scroll() 함수를 호출하여 초기 애니메이션을 시작합니다

스크롤을 하면 세로로 내려가다가 가로로 넘어가고 다시 세로로 이동하는 효과입니다.

 

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>패럴랙스 이펙트09</title>
        <link rel="stylesheet" href="css/reset.css" />
        <link rel="stylesheet" href="css/parallax.css" />
    </head>
    <body class="img01 bg01 Eulyoo">
        <header id="header">
            <h1>Javascript Parallax Effect09</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><a href="parallaxEffect06.html">6</a></li>
                <li><a href="parallaxEffect07.html">7</a></li>
                <li><a href="parallaxEffect08.html">8</a></li>
                <li class="active"><a href="parallaxEffect09.html">9</a></li>

            </ul>
        </header>
        <!-- header -->
        <main id="main">
            <div class="parallaxs__wrap">
                <section id="section1" class="parallaxs__item">
                    <span class="parallaxs__item__num">01</span>
                </section>
                <!--//section1-->
                <section id="section2" class="parallaxs__item">
                    <span class="parallaxs__item__num">02</span>
                </section>
                <!--//section2-->
                <section id="section3" class="parallaxs__item">
                    <span class="parallaxs__item__num">03</span>
                </section>
                <!--//section3-->
                <section id="section4" class="parallaxs__item">
                  <div class="sec4">
                    <article><span class="parallaxs__item__num">04-1</span></article>
                    <article><span class="parallaxs__item__num">04-2</span></article>
                    <article><span class="parallaxs__item__num">04-3</span></article>
                  </div>
                </section>
                <!--//section4-->
                <section id="section5" class="parallaxs__item">
                    <span class="parallaxs__item__num">05</span>
                </section>
                <!--//section5-->
                <section id="section6" class="parallaxs__item">
                    <span class="parallaxs__item__num">06</span>
                </section>
                <!--//section6-->
                <section id="section7" class="parallaxs__item">
                    <span class="parallaxs__item__num">07</span>
                </section>
                <!--//section7-->
                <section id="section8" class="parallaxs__item">
                    <span class="parallaxs__item__num">08</span>
                </section>
                <!--//section8-->
                <section id="section9" class="parallaxs__item">
                    <span class="parallaxs__item__num">09</span>
                </section>
                <!--//section9-->
                <aside class="parallax__info">
                    <div class="scroll">scrollTop : <span>0</span>px</div>
                </aside>
                <!--//parallax__info-->
            </div>
        </main>
        <!-- //main -->
    </body>
</html>

 

CSS

<style>
    #header {
        position: fixed;
        z-index: 10000;
    }
    .parallaxs__wrap {

    }
    .parallaxs__item {
        width: 100vw;
        height: 100vh;
        position: relative;
    }
    #section1 {background-color: #111; z-index: 7000;}
    #section2 {background-color: #222; z-index: 6000;}
    #section3 {background-color: #333; z-index: 5000;}
    #section4  {
        background-color: #444;
        height: 400vh;
        z-index: 4000;
    }
    #section4 .sec4 {
        position: fixed;
        left: 0;
        top: 0;
        width: 400vh;
        height: 100%;
        display: flex;
    }
    #section4 .sec4 article {
        width: 200vh;
        height: 100vh;
        position: relative;
    }
    #section4 .sec4 article:nth-child(1) {background-color: rgb(255, 95, 95); }
    #section4 .sec4 article:nth-child(2) {background-color: rgb(255, 195, 95);}
    #section4 .sec4 article:nth-child(3) {background-color: rgb(155, 195, 95);}
    #section5 {background-color: #555; z-index: 5000;}
    #section6 {background-color: #666; z-index: 6000;}
    #section7 {background-color: #777; z-index: 7000;}
    #section8 {background-color: #888; z-index: 8000;}
    #section9 {background-color: #999; z-index: 9000;}
    .parallaxs__item__num {
        position: absolute;
        bottom: 20px;
        right: 20px;
        color: #fff;
        font-size: 10vw;
        z-index: 1000;
    }
    .parallax__info {
        z-index: 10000;
    }
</style>

중간에 가로로 넘어가는 영역에 색을 변경해주고 가로 영역을 제외하고 각각 z index 값을 주었습니다.

z-index값을 넣지 않으면 가로 영역이 먼저 보여집니다.

SCRIPT

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
        <script>
            const section4 = document.querySelector("#section4").offsetTop;
            function scroll(){
                let scrollTop = window.pageYOffset;
                let goLeft = scrollTop - section4;

               if(scrollTop >= section4) {
                gsap.to(".sec4", {left: -goLeft, ease: "linear"})
               }

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


 외부 라이브러리인 GSAP(GreenSock Animation Platform)를 가져오기 위한 `<script>` 태그를 사용하여 CDN 링크를 추가합니다.
`section4` 변수를 사용하여 효과를 적용할 요소의 오프셋 탑(top) 위치를 가져옵니다. 이는 `id`가 "section4"인 요소의 오프셋 탑 위치입니다.

 `scroll` 함수를 정의합니다. 이 함수는 스크롤 이벤트가 발생할 때 호출됩니다.

 `window.pageYOffset`를 사용하여 현재 스크롤의 Y축 위치를 가져옵니다.
`scrollTop`과 `section4`의 차이를 계산하여 요소를 이동시킬 양을 `goLeft` 변수에 저장합니다.

 `scrollTop`이 `section4`보다 크거나 같을 경우에만 요소를 이동시킵니다. 이 조건을 추가하여 특정 위치 이후에만 효과가 발생하도록 합니다.
`gsap.to`를 사용하여 ".sec4" 요소를 애니메이션으로 이동시킵니다. 이동하는 양은 `-goLeft`이며, "linear" 이징 함수를 적용합니다.

 `document.querySelector(".scroll span").innerText`를 사용하여 스크롤 위치를 업데이트합니다.
 `requestAnimationFrame(scroll)`을 사용하여 다음 프레임에서 `scroll` 함수를 호출합니다. 이로써 스크롤 이벤트가 발생할 때마다 애니메이션이 업데이트됩니다.
 `scroll()` 함수를 호출하여 초기 애니메이션을 시작합니다.

'JAVASCRIPT'의 다른글

  • 현재글패럴랙스 이펙트 08, 09

관련글

댓글

티스토리툴바