parallax Effect - 05

스크립트를 이용한 패럴랙스효과 만들기 05

GSAP를 이용하여 텍스트와 이미지, 타이틀에 이질감을 주는 효과를 만들어 봅시다✏️

원본 소스 보기

scrollTop

scrollTop값이 필요하니 변수에 값을 저장해 줍니다.
🔊브라우저마다 호환성 문제가 있으니 여러개의 값을 적어주는 것이 좋겠네요.

let scrollTop = window.pageYOffset || document.documentElement.scrollTop;

스크롤 값

스크롤을 할 때마다 현재 스크롤 값을 보여 줍니다.
Math.ceil()를 이용하여 소수점 자리값을 올림 해줍니다.

document.querySelector("#parallax__info span").textContent = Math.ceil(scrollTop);

스크립트 작성

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

    document.querySelector("#parallax__info span").textContent = Math.ceil(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 offset = (scrollTop - item.offsetTop) * 0.1;
        let offset2 = (scrollTop - item.offsetTop) * 0.15;
        let offset3 = (scrollTop - item.offsetTop) * 0.2;

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

        //GSAP
        gsap.to(target1, {duration: .3, y: offset, ease: "power4.out"});
        gsap.to(target2, {duration: .3, y: offset3, ease: "circ.out"});
        gsap.to(target3, {duration: .3, y: offset2});

    });

    requestAnimationFrame(scroll);
}
scroll();

function scroll(){
requestAnimationFrame(scroll);
}
scroll();
🎈이번에도 재귀함수를 이용하여 줍니다. requestAnimationFrame();으로 브라우저에 최적화를 시켜주는것도 잊지 말자구요.

//GSAP
gsap.to(target1, {duration: .3, y: offset, ease: "power4.out"});
gsap.to(target2, {duration: .3, y: offset3, ease: "circ.out"});
gsap.to(target3, {duration: .3, y: offset2});
🔧이번에는 GSAP를 이용하여 조금 더 부드럽게 애니메이션이 나올 수 있도록 해 봅시다.