패럴랙스 - 이질감 효과

패럴랙스 - 이질감효과

페럴랙스 효과는 스크롤을 내리면서 알맞은 스크롤의 위치에서 효과가 생기는 것을 말합니다.

javascript

1. 자바스크립트를 사용하여 브라우저의 scrollTop의 값을 구했습니다.
2. content__item span의 scrollTop값을 section의 각 요소의 offsetTop값을 비교해서 offset변수에 대입합니다.
3. 대입했으면 gsap를 사용하여 x축과 y축으로 offset의 값 만큼 변화를 주도록합니다.
밑에 피그마를 보면서 다시 이해해 보도록하겠습니다.

javascript

function scroll() {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    document.querySelector("#parallax__info span").innerText = Math.round(scrollTop);

    document.querySelectorAll(".content__item").forEach(item => {
        const target1 = item.querySelector(".content__item__img");
        const target2 = item.querySelector(".content__item__desc");
        const target3 = item.querySelector(".content__item__num");

        let offset1 = (scrollTop - item.offsetTop)*0.1;
        let offset2 = (scrollTop - item.offsetTop)*0.01; //더빨리 움직임
        let offset3 = (scrollTop - item.offsetTop)*0.5; //더빨리 움직임

        // target1.style.transform = `translateY(${offset}px)`
        // target2.style.transform = `translateX(${offset2}px)`

        gsap.to(target1, {duration: .3, y: offset1, ease: "power4.out"})
        gsap.to(target2, {duration: .3, rotate: offset2})
        gsap.to(target3, {duration: .3, y: offset3, ease: "expo4.out"})
    });
    requestAnimationFrame(scroll);
}
scroll();

HTML

html입니다. 각 요소에 클래스를 만들어서 animation 줄 수 있도록 하였습니다.

HTML

<main id="parallax__cont">
<div id="contents">
    <section id="section1" class="content__item">
        <span class="content__item__num">01</span>
        <h2 class="content__item__title">section1</h2>
        <figure class="content__item__imgWrap">
            <div class="content__item__img"></div>
        </figure>
        <p class="content__item__desc">결과도 중요하지만, 과정을 더 중요하게 생각한다.</p>
    </section>
    <!-- section01 -->
    <section id="section2" class="content__item">
        <span class="content__item__num">02</span>
        <h2 class="content__item__title">section2</h2>
        <figure class="content__item__imgWrap">
            <div class="content__item__img"></div>
        </figure>
        <p class="content__item__desc"> 직업에서 행복을 찾아라. 아니면 행복이 무엇인지 절대 모를 것이다</p>
    </section>
    <!-- section02 -->
    <section id="section3" class="content__item">
        <span class="content__item__num">03</span>
        <h2 class="content__item__title">section3</h2>
        <figure class="content__item__imgWrap">
            <div class="content__item__img"></div>
        </figure>
        <p class="content__item__desc">피할수 없으면 즐겨라 그리고 행동해라</p>
    </section>
    <!-- section03 -->
    <section id="section4" class="content__item">
        <span class="content__item__num">04</span>
        <h2 class="content__item__title">section4</h2>
        <figure class="content__item__imgWrap">
            <div class="content__item__img"></div>
        </figure>
        <p class="content__item__desc">실패는 잊어라 그러나 그것이 준 교훈은 절대 잊으면 안된다.</p>
    </section>
    <!-- section04 -->
    <section id="section5" class="content__item">
        <span class="content__item__num">05</span>
        <h2 class="content__item__title">section5</h2>
        <figure class="content__item__imgWrap">
            <div class="content__item__img"></div>
        </figure>
        <p class="content__item__desc">당신이 할수 있다고 믿든 할수 없다고 믿든 믿는 대로 될것이다.</p>
    </section>
    <!-- section05 -->
    <section id="section6" class="content__item">
        <span class="content__item__num">06</span>
        <h2 class="content__item__title">section6</h2>
        <figure class="content__item__imgWrap">
            <div class="content__item__img"></div>
        </figure>
        <p class="content__item__desc">눈물과 더불어 빵을 먹어 보지 않은 자는 인생의 참다운 맛을 모른다. </p>
    </section>
    <!-- section06 -->
    <section id="section7" class="content__item">
        <span class="content__item__num">07</span>
        <h2 class="content__item__title">section7</h2>
        <figure class="content__item__imgWrap">
            <div class="content__item__img"></div>
        </figure>
        <p class="content__item__desc">좋은 성과를 얻으려면 한 걸음 한 걸음이 힘차고 충실하지 않으면 안 된다.</p>
    </section>
    <!-- section07 -->
    <section id="section8" class="content__item">
        <span class="content__item__num">08</span>
        <h2 class="content__item__title">section8</h2>
        <figure class="content__item__imgWrap">
            <div class="content__item__img"></div>
        </figure>
        <p class="content__item__desc">산다는것 그것은 치열한 전투이다.</p>
    </section>
    <!-- section08 -->
    <section id="section9" class="content__item">
        <span class="content__item__num">09</span>
        <h2 class="content__item__title">section9</h2>
        <figure class="content__item__imgWrap">
            <div class="content__item__img"></div>
        </figure>
        <p class="content__item__desc">세상은 과정보다 결과를 중요시한다.</p>
    </section>
    <!-- section09 -->
</div>
</main>
<aside id="parallax__info">
    <div class="scroll">scrollTop:<span>0</span>px</div>
</aside>

설명

결과

원본 소스 보기