자바스크립트 패럴랙스-08, 09 가로스크롤효과

패럴랙스효과를 나타내기 

 전체 소스는 요기 

css 소스는 요기 

body를 볼게요 ! 

<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 -->
        </div>
    </main>

위처럼 body영역엔 이미지만 넣어줬어요 ! 

따로 css를 전부 빼서 작업했어요 

 

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:"power4.out"})

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

가로값 = 세로값으로 세팅하여

세로값이 바뀔때 가로로 스크롤하게 하였습니다 ! 

 

 

아래는 세로>>가로>>세로 효과를 볼거에요 ! 

    <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 -->
        </div>
    </main>

구조는 위처럼 만들었구요 

가로스크롤하는부분은 sec4div에 3개의 화면이 보이게 했어요 

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
    <script>
        const secion4 = document.querySelector("#section4").offsetTop;
        function scroll(){
            let scrollTop = window.pageYOffset;
            let goLeft = scrollTop - document.querySelector("#section4").offsetTop
            if(scrollTop >= secion4){
                gsap.to(".sec4", {left: -goLeft, ease: "linear"})
            }
            document.querySelector(".scroll span").innerHTML = Math.round(scrollTop);
            requestAnimationFrame(scroll);
        }
        scroll();
    </script>

전체 세로 길이값에서 4번째div의 높이에 온다면

 

gsap를 이용해서 가로로 이동시켜 줍니다 이게 왜 되냐면 

가로로 스크롤을 한다고 생각을 하지만

실제로는 

section은 세로가 400vh이고 이 400vh를 스크롤할때 

 

.sec4에서 flex로 3개의 화면을 붙여 옆으로 이동시킵니다 

보이는건 sec4에서 position:fixed효과로 article이 옆으로 나와요

#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;
}

그래서 

 

세로로 스크롤은 하지만 내려가는건 보이지 않고

 

가로방향으로 4-1 4-2 4-3이 차례대로 이동하는모습만 보이고 

 

내려갑니다