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

코딩 공부/JAVASCRIPT

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

천서리 2023. 5. 31. 21:54

QUOTE THE DAY

“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”

- 이글슨 (Eagleson)

패럴랙스 이펙트란?

패럴랙스 이펙트는 사용자가 스크롤을 내리거나 올릴 때, 배경과 함께 웹 페이지의 요소들이 서로 다른 속도로 움직이는 것을 말합니다. 이는 일반적으로 CSS와 JavaScript를 사용하여 구현되며, 웹 페이지를 더욱 동적이고 인터랙티브하게 만들어줍니다.

웹사이트 패럴랙스 이펙트를 사용하면 사용자가 웹 페이지를 스크롤 할 때, 배경 이미지와 함께 다양한 요소들이 움직이는 것처럼 보입니다. 예를 들어, 웹 페이지에 일러스트나 이미지를 배경으로 사용하면 이를 이용하여 사용자의 눈길을 이끌거나 페이지의 구조를 강조할 수 있습니다. 또는 텍스트나 버튼과 같은 요소들도 패럴랙스 이펙트를 이용하여 동적인 효과를 줄 수 있습니다.

패럴랙스 이펙트는 웹 디자인의 트렌드 중 하나로, 사용자 경험을 개선하고 웹 페이지를 더욱 흥미롭고 동적으로 만들어줍니다. 하지만, 지나친 사용은 사용자 경험을 해치고 성능 저하를 일으킬 수 있으므로 적절한 사용이 필요합니다.

패럴랙스 이펙트 : 가로 효과

HTML

<body class="img12 bg01 font02">
    <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>
            <li><a href="parallaxEffect10.html">10</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 -->
        </div>
    </main>
    <!-- //main -->

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

CSS

#header {
    position: fixed;
    z-index: 10000;
}
.parallaxs__wrap {
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
}
.parallaxs__item {
    width: 80vw;
    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;
    right: 20px;
    bottom: 20px;
    color: #fff;
    font-size: 10vw;
    z-index: 1000;
}

#header는 position: fixed; 속성을 가지고 있어 화면 상단에 고정되며, z-index: 10000; 속성을 통해 다른 요소들보다 위에 위치하도록 설정됩니다.
.parallaxs__wrap는 position: fixed; 속성을 가지고 있어 화면 상단에 고정되며, left: 0;과 top: 0; 속성을 통해 왼쪽 상단에 위치하도록 설정됩니다. 또한, display: flex; 속성을 가지고 있어 자식 요소들을 가로로 배치하도록 설정됩니다.
.parallaxs__item은 width: 80vw;와 height: 100vh; 속성을 가지고 있어 뷰포트의 80%와 100%의 크기를 가지도록 설정됩니다. 또한, position: relative; 속성을 가지고 있어 자식 요소들에 대한 상대적인 위치를 설정할 수 있도록 합니다.
#section1부터 #section9까지 각각의 아이디를 가진 요소는 각기 다른 배경 색상을 가지도록 설정되어 있습니다.
.parallaxs__item__num는 position: absolute; 속성을 가지고 있어 부모 요소에 대해 상대적인 위치를 가지며, right: 20px;와 bottom: 20px; 속성을 통해 오른쪽 아래에 위치하도록 설정됩니다. 또한, 텍스트 색상, 글꼴 크기 및 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: "power4.out"});

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

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js에서 GSAP 라이브러리를 가져옵니다.
parallaxCont라는 클래스를 가진 요소를 querySelector를 통해 찾아 변수에 할당합니다. 이 요소는 가로 스크롤 효과를 적용할 요소입니다.
scroll이라는 함수를 정의합니다. 이 함수는 스크롤 이벤트가 발생할 때마다 호출되며, 스크롤 위치에 따라 요소를 움직입니다.
함수 내부에서 scrollTop 변수를 사용하여 현재 스크롤 위치를 가져옵니다.
parallaxWidth 변수는 parallaxCont 요소의 가로 너비를 저장합니다.
document.body.style.height를 통해 body 요소의 높이를 parallaxWidth로 설정합니다. 이는 스크롤을 할 때 스크롤 가능한 영역을 설정하는데 사용됩니다.
viewWidth 변수와 viewHeight 변수는 스크롤 가능한 전체 영역과 뷰포트의 크기 간의 차이를 계산합니다.
goLeft 변수는 scrollTop 값을 이용하여 요소를 왼쪽으로 이동시킬 거리를 계산합니다. goLeft 값은 스크롤 위치에 따라 가로 방향으로 움직이는 양을 결정합니다.
gsap.to 함수를 사용하여 parallaxCont 요소에 대한 애니메이션을 설정합니다. 이 애니메이션은 left 속성을 -goLeft 값으로 변경하며, ease: "power4.out" 옵션을 통해 이징(easing) 효과를 적용합니다. 이징 효과는 움직임의 자연스러움을 조절하는데 사용됩니다.
document.querySelector(".scroll span").innerText를 사용하여 현재 스크롤 위치를 반영하는 요소의 내용을 변경합니다.
마지막으로 requestAnimationFrame(scroll)을 사용하여 애니메이션을 부드럽게 처리하고, 다음 애니메이션 프레임을 요청합니다. 이를 통해 부드러운 스크롤 효과를 제공합니다.

즉, 해당 스크립트는 GSAP 라이브러리를 사용하여 가로 스크롤 효과를 생성하고, 스크롤 위치에 따라 요소를 움직이도록 합니다.

패럴랙스 이펙트 : 가로 세로 효과

HTML

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

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

CSS

 #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: rgba(225, 95, 95);}
#section4 .sec4 article:nth-child(2){background-color: rgba(225, 195, 95);}
#section4 .sec4 article:nth-child(3){background-color: rgba(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;
    right: 20px;
    bottom: 20px;
    color: #fff;
    font-size: 10vw;
    z-index: 1000;
}
.parallax__info {
    z-index: 10000;
}

#header는 position: fixed; 속성을 가지고 있어 화면 상단에 고정되며, z-index: 10000; 속성을 통해 다른 요소들보다 위에 위치하도록 설정됩니다.
.parallaxs__item 클래스는 width: 100vw;와 height: 100vh; 속성을 가지고 있어 뷰포트의 100% 크기를 가지도록 설정됩니다. 또한, position: relative; 속성을 가지고 있어 자식 요소들에 대한 상대적인 위치를 설정할 수 있도록 합니다.
#section1부터 #section9까지 각각의 아이디를 가진 요소는 각기 다른 배경 색상을 가지도록 설정되어 있습니다. 또한, z-index 속성을 통해 요소들의 쌓임 순서를 지정합니다.
#section4 아이디를 가진 요소는 height: 400vh; 속성을 가지고 있어 뷰포트 높이의 400% 크기를 가지도록 설정됩니다. 이 요소 내부에는 .sec4 클래스를 가진 자식 요소들이 포함되어 있습니다.
#section4 .sec4 선택자는 .sec4 클래스를 가진 요소에 대한 스타일을 정의합니다. 해당 요소는 position: fixed; 속성을 가지고 있어 화면 상단에 고정되며, left: 0;과 top: 0; 속성을 통해 왼쪽 상단에 위치하도록 설정됩니다. 또한, width: 400vh; 속성을 가지고 있어 뷰포트 너비의 400% 크기를 가지도록 설정되며, height: 100%; 속성을 가지고 있어 부모 요소의 100% 높이를 가지도록 설정됩니다. 이 요소 내부에는 .sec4 클래스를 가진 article 요소들이 포함되어 있습니다.
#section4 .sec4 article 선택자는 .sec4 클래스를 가진 article 요소들에 대한 스타일을 정의합니다. 각 article 요소는 width: 200vh;와 height: 100vh; 속성을 가지고 있어 뷰포트 너비의 200%와 높이의 100% 크기를 가지도록 설정됩니다. 또한, position: relative; 속성을 가지고 있어 자식 요소들에 대한 상대적인 위치를 설정할 수 있도록 합니다. 각 article 요소는 배경색을 가지고 있으며, rgba() 값을 통해 투명도를 지정할 수 있습니다.
.parallaxs__item__num 클래스는 특정 요소 내에 위치하는 숫자를 나타내기 위한 스타일을 정의합니다. 해당 요소는 position: absolute; 속성을 가지고 있어 부모 요소를 기준으로 위치가 지정됩니다. right: 20px;와 bottom: 20px; 속성을 통해 오른쪽 하단에 위치하도록 설정되며, 색상과 글꼴 크기를 지정합니다. z-index: 1000; 속성을 통해 다른 요소들보다 앞에 나타나도록 설정됩니다.
마지막으로, .parallax__info 클래스는 z-index: 10000; 속성을 가지고 있어 다른 요소들보다 위에 위치하도록 설정됩니다.

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>

먼저, https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js에서 GSAP 라이브러리를 가져옵니다.
다음으로, #section4 아이디를 가진 요소의 offsetTop 속성을 section4 변수에 할당합니다. 이는 해당 요소의 페이지에서의 상단 위치를 나타냅니다.
scroll이라는 함수를 정의합니다. 이 함수는 스크롤 이벤트가 발생할 때마다 호출되며, 스크롤 위치에 따라 요소를 움직입니다.
함수 내부에서 scrollTop 변수를 사용하여 현재 스크롤 위치를 가져옵니다.
goLeft 변수는 scrollTop 값과 section4 값을 뺀 값으로 설정됩니다. 이는 현재 스크롤 위치에서 #section4 요소의 상단 위치를 뺀 거리를 나타냅니다.
scrollTop이 section4 이상인 경우, gsap.to 함수를 사용하여 .sec4 클래스를 가진 요소에 대한 애니메이션을 설정합니다. 이 애니메이션은 left 속성을 -goLeft 값으로 변경하며, ease: "linear" 옵션을 통해 일정한 속도로 움직이도록 설정합니다.
document.querySelector(".scroll span").innerText를 사용하여 현재 스크롤 위치를 반영하는 요소의 내용을 변경합니다.
마지막으로 requestAnimationFrame(scroll)을 사용하여 애니메이션을 부드럽게 처리하고, 다음 애니메이션 프레임을 요청합니다. 이를 통해 부드러운 스크롤 효과를 제공합니다.

즉, 해당 스크립트는 GSAP 라이브러리를 사용하여 스크롤 위치에 따라 특정 요소를 가로 방향으로 움직이도록 합니다. 스크롤 위치가 #section4 요소의 위치를 넘어섰을 때에만 움직임이 발생하도록 제어하고, 스크롤 위치에 따라 .scroll span 요소의 내용을 업데이트합니다.

현재글패럴랙스 이펙트(parallaxEffect) : 가로 효과, 가로 세로 효과

GIT 블로그

Loading data ...

HTML, 시흥순두부맛집, 마우스이펙트, 텍스트유형, or연산, 리턴 함수, 자바스크립트, 카드 유형, 함수, 안산순두부짬뽕, 오서방닭개장, 선언적함수, 매개변수 함수, function, 이미지텍스트유형, mysql, xor연산, jabascript, 코딩, javascript,

Today :
Yesterday :

SEOLHEE