parallaxEffect05 - 이질감 효과

개요

스크롤이 되면 사진과 글씨도 같이 스크롤이 되도록 하였다

 

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

 

JS 구성

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

    document.querySelectorAll(".content__item").forEach(item => {
        let offset1 = (scrollTop - item.offsetTop) * 0.1;
        let offset2 = (scrollTop - item.offsetTop) * 0.2;

        let target1 = item.querySelector(".content__item__img");
        let target2 = item.querySelector(".content__item__desc");

        gsap.to(target1, {duration: .3, y: offset1, ease: "power1.out"});
        gsap.to(target2, {duration: .3, y: offset2, ease: "power1.out"});
    })

    requestAnimationFrame(scroll);
}
scroll();

1. requestAnimationFrame() : 애니메이션을 더욱 잘 표현하게 해준다

2. offset은 전체 스크롤 값에서 해당 섹션의 길이를 빼준 값의 0.1배 혹은 0.2배이다

3. 이 값을 통해 애니메이션을 준다(gsap사용)

 

 

 

 

링크 https://sungilryuu.github.io/webs_class/javascript/effect/parallaxEffect05.html