패럴랙스 이펙트(8)~(9) 만들어보자! [가로, 가로 세로 효과]

오늘은 패럴랙스 이펙트 중 가로 효과와 가로세로 효과를 만들어보겠습니당!

패럴랙스 이펙트 (8)

구조

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

CSS

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

✏️코드 설명

#header: 이 CSS 선택자는 "header"라는 ID를 가진 요소를 선택합니다. 이 요소에 대해 z-index를 10000으로 설정하고 position을 fixed로 설정합니다. 이는 header 요소가 고정되어 있고 다른 z-index 값이 낮은 요소들보다 위에 위치하게 됩니다.

.parallaxs__wrap: 이 CSS 선택자는 "parallaxs__wrap"이라는 클래스를 가진 요소를 선택합니다. 이 요소에 대해 position을 fixed로 설정하고 display를 flex로 설정합니다. 또한 left와 top을 0으로 설정하여 화면의 왼쪽 상단에 요소를 배치합니다.

.parallaxs__item: 이 CSS 선택자는 "parallaxs__item"이라는 클래스를 가진 요소를 선택합니다. 이 요소에 대해 width를 100vw로 설정하여 뷰포트의 가로 크기와 동일하게 만들고, height를 100vh로 설정하여 뷰포트의 세로 크기와 동일하게 만듭니다. 또한 position을 relative로 설정하여 상대적인 위치를 가지게 합니다.

#section1부터 #section9: 각각의 ID를 가진 요소들에 대한 스타일을 지정합니다. 배경 색상을 지정하여 각 섹션의 배경을 다른 색으로 설정합니다.

.parallaxs__item__num: 이 CSS 선택자는 "parallaxs__item__num"이라는 클래스를 가진 요소를 선택합니다. 이 요소에 대해 position을 absolute로 설정하고, bottom을 20px, right을 60px로 설정하여 요소를 화면 오른쪽 아래에 위치시킵니다. 또한 color를 #fff로 설정하여 흰색으로 글자색을 변경하고, font-size를 10vw로 설정하여 화면의 너비에 상대적인 크기로 글자 크기를 지정합니다. 마지막으로 z-index를 1000으로 설정하여 다른 요소들보다 위에 위치하게 만듭니다.

스크립트

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"});

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

✏️코드 설명

parallaxCont라는 변수를 선언하여 "parallaxs__wrap" 클래스를 가진 요소를 선택합니다. 이 요소는 parallax scrolling 효과를 적용할 컨테이너 역할을 합니다.

scroll이라는 함수를 정의합니다. 이 함수는 스크롤 이벤트가 발생할 때 실행됩니다.

scrollTop 변수를 사용하여 현재 스크롤 위치를 가져옵니다.

parallaxWidth 변수를 사용하여 parallaxCont 요소의 너비를 가져옵니다. 그리고 document.body.style.height를 설정하여 문서의 높이를 parallaxWidth로 설정합니다. 이렇게 함으로써 스크롤바가 충분한 길이를 가지게 되어 전체 parallax 효과가 제대로 보여집니다.

viewWidth 변수와 viewHeight 변수를 사용하여 뷰포트의 너비와 높이에 기반하여 parallax 효과에 필요한 값을 계산합니다.

goLeft 변수를 사용하여 스크롤 위치에 따라 요소가 왼쪽으로 이동하는 양을 계산합니다.

gsap.to() 함수를 사용하여 parallaxCont 요소의 left 속성을 -goLeft로 애니메이션화합니다. ease: "power4"는 애니메이션의 이징을 지정합니다. gsap 라이브러리를 사용하고 있다는 가정하에 이 부분이 작동합니다.

document.querySelector(".scroll span").innerText를 사용하여 .scroll 클래스를 가진 요소 내부의 span 요소의 텍스트를 현재 스크롤 위치로 설정합니다. 이 부분은 페이지에 표시되는 현재 스크롤 위치를 나타냅니다.

requestAnimationFrame(scroll)을 호출하여 다음 애니메이션 프레임을 요청합니다. 이렇게 함으로써 scroll 함수가 계속해서 실행되어 스크롤 위치에 따라 parallax 효과가 제대로 유지됩니다.

마지막으로 scroll() 함수를 호출하여 초기 스크롤 위치에 따라 parallax 효과를 적용합니다.

완성된 페이지와 소스 보기

 

 

코드보기

패럴랙스 이펙트 (9)

구조

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

CSS

#header {
    z-index: 10000;
    position: fixed;
}
.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(255, 95, 95, 1);}
#section4 .sec4 article:nth-child(2){background-color: rgba(255, 195, 95, 1);}
#section4 .sec4 article:nth-child(3){background-color: rgba(155, 195, 95, 1);}
#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: 60px;
    color: #fff;
    font-size: 10vw;
    z-index: 1000;
}
.parallax__info {
    z-index: 10000;
}

✏️코드 설명

.parallaxs__wrap: 이 클래스를 가진 요소에 대한 스타일이 제거되었습니다. 이 부분은 추가적인 스타일이 없으므로 원래 상태를 유지합니다.

#section1부터 #section9: 각 섹션에 대한 스타일이 추가되었습니다. 배경 색상은 이전과 동일하게 설정되지만, 각 섹션에 대해 z-index 값이 지정되어 있습니다. 이를 통해 스크롤 시 각 섹션의 쌓임 순서를 조정할 수 있습니다.

#section4: 이 섹션은 높이가 400vh로 설정되어 있습니다. 또한 .sec4 클래스를 가진 자식 요소가 있으며, 해당 요소에는 position: fixed가 설정되어 있습니다. 이로써 섹션 4 내부의 콘텐츠는 스크롤되지 않고 고정됩니다. .sec4 클래스는 .parallaxs__item 요소와 동일한 너비와 높이를 가지도록 설정되어 있으며, 하위 article 요소들은 각각 다른 배경 색상을 가지도록 설정되어 있습니다.

.parallax__info: 이 클래스를 가진 요소에 대한 스타일이 추가되었습니다. z-index 값이 10000으로 설정되어 있으므로 다른 요소들보다 위에 위치합니다.

스크립트

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();

✏️코드 설명

section4 상수를 선언하여 #section4 요소의 offsetTop 속성을 가져옵니다. 이를 통해 #section4 요소의 페이지의 맨 위에서부터의 거리를 가져옵니다.

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

scrollTop 변수를 사용하여 현재 스크롤 위치를 가져옵니다.

goLeft 변수를 사용하여 스크롤 위치에서 section4 값만큼을 뺀 값을 계산합니다. 이를 통해 스크롤 위치와 section4 사이의 차이를 구합니다.

scrollTop이 section4 이상일 때 (스크롤이 #section4에 도달했을 때), gsap.to() 함수를 사용하여 .sec4 요소의 left 속성을 -goLeft로 애니메이션화합니다. ease: "linear"는 애니메이션의 이징을 선형으로 설정합니다. 여기서 gsap 라이브러리를 사용하고 있다는 가정하에 이 부분이 작동합니다.

document.querySelector(".scroll span").innerText를 사용하여 .scroll 클래스를 가진 요소 내부의 span 요소의 텍스트를 현재 스크롤 위치로 설정합니다. 이 부분은 페이지에 표시되는 현재 스크롤 위치를 나타냅니다.

requestAnimationFrame(scroll)을 호출하여 다음 애니메이션 프레임을 요청합니다. 이렇게 함으로써 scroll 함수가 계속해서 실행되어 스크롤 위치에 따라 parallax 효과가 제대로 유지됩니다.

마지막으로 scroll() 함수를 호출하여 초기 스크롤 위치에 따라 parallax 효과를 적용합니다.

완성된 페이지와 소스 보기

 

 

코드보기