본문 바로가기
JAVASCRIPT

패럴랙스 이펙트(Parallax Effect) : 가로 효과, 세로/가로 효과

by dongjin6539 2023. 5. 31.
728x90
반응형

패럴랙스 이펙트(Parallax Effect) : 가로 효과, 세로/가로 효과

 

수업 시간에 배운 내용을 복습하면서 해보겠습니다.

가로 효과 코드 보기: HTML, JAVASCRIPT / CSS1 / CSS2 / 완성화면

 

 

 

코드 블럭

<!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">
    <style>
        #header {
            position: fixed;
            z-index: 10000;
        }
        .parallaxs__wrap {
            position: fixed;
            left: 0;
            top: 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;
        }
    </style>
</head>
<body class="font08">
    <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 class="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>
    <!-- //main -->

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

구성

  • header 태그를 사용해서 제목과 목록을 태그를 사용해 각각 만들어줍니다.
  • nav 태그를 사용해서 메뉴 목록을 태그를 사용해서 만들어줍니다.
  • main 태그를 사용해서 구역 안에 section 태그를 사용해서 각각 알맞는 구성의 태그와 텍스트를 입력해줍니다.
  • aside 태그를 사용해서 section 태그의 좌표 값을 입력해주게끔 만들어줍니다. 
  • 추가로 필요한 css style은 직접 입력해줍니다.
  • 가로로 해주기 위해 부모인 parallaxs__wrap에 display: flex;를 줍니다.

 

JAVASCRIPT

<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").innerText = Math.round(scrollTop);
        requestAnimationFrame(scroll);
    }
    scroll();
</script>

자바스크립트 구성

  • 패럴렉스 전체 구역을 선택자로 가져옵니다.
  • window.pageYOffset를 사용해서 scroll 위치의 값을 구합니다.
  • 다음 offsetWidth로 패럴렉스 구역의 width값을 구해줍니다.
  • 그 값을 body에 style로 hegiht값을 지정해줍니다.
  • 하지만 그렇게 해도 스크롤하다보면 구역을 넘어가기 때문에 또 다른 width값을 구해주는데 기존에 구한 width값에 window의 width값을 빼주고 높이도 window의 height값을 빼주는 변수를 만들어줍니다.
  • 그리고 그 가로값과 높이값을 나누고 스크롤의 위치값을 곱해주는 변수를 만들어줍니다.
  • 다음 gsap 라이브러리를 사용해서 left로  가로값과 높이값을 나누고 스크롤의 위치값을 곱해준 값을 빼줍니다.

 

세로/가로 효과 코드 보기 : HTML, JAVASCRIPT / CSS1 / CSS2 / 완성화면

 

 

 

코드 블럭

<!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">
    <style>
        #header {
            position: fixed;
            z-index: 10000;
        }
        .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: #c9b035;}
        #section4 .sec4 article:nth-child(2) {background-color: #d3c995;}
        #section4 .sec4 article:nth-child(3) {background-color: #817743;}
        #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>
</head>
<body class="font08">
    <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 class="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>
    <!-- //main -->

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

구성

  • header 태그를 사용해서 제목과 목록을 태그를 사용해 각각 만들어줍니다.
  • nav 태그를 사용해서 메뉴 목록을 태그를 사용해서 만들어줍니다.
  • main 태그를 사용해서 구역 안에 section 태그를 사용해서 각각 알맞는 구성의 태그와 텍스트를 입력해줍니다.
  • aside 태그를 사용해서 section 태그의 좌표 값을 입력해주게끔 만들어줍니다. 
  • 추가로 필요한 css style은 직접 입력해줍니다.
  • 가로로 해주기 위해 해당하는 부분에 부모인 section4에 display: flex;를 줍니다.

 

JAVASCRIPT

<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>

자바스크립트 구성

  • 해당하는 부분의 offsetTop값으로 높이 값을 선택자로 만들어줍니다.
  • pageYOffset 값으로 스크롤 위치값을 구해줍니다.
  • 변수를 스크롤 위치 값에서 가로 부분의 높이 값을 빼줍니다.
  • if문을 사용해서 스크롤 위치 값이 가로 부분에 해당하는 값이 이상일 경우 gsap 라이브러리를 사용해서 이동시켜줍니다.

 

 

728x90
반응형