자바스크립트 패럴랙스 효과 : 이질감 효과

자바스크립트 : 패럴랙스 효과 : 이질감 효과

자바스크립트의 다양한 효과들 중, 패럴랙스 효과입니다. 이번에는 스크롤을 내릴 때마다 글자와 이미지에 애니메이션 효과를 주어, 약간의 이질감이 느껴지도록 작업해 보았습니다.

---

1. 스크롤 이벤트 만들어 주기

function scroll() {
    requestAnimationFrame(scroll);
};
scroll();

오늘 작업할 모든 함수들은, 재귀 함수인 scroll() 내에서 작업할 예정입니다. 패럴랙스 효과 3번에서도 설명했듯이, addEventListener를 사용하지 않는 이유는 버벅거림 현상을 피하기 위해서입니다.

2. 현재 스크롤의 높이값 구하기

let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
document.querySelector("#parallax__info span").innerText = Math.ceil(scrollTop);

패럴랙스 효과의 가장 기본이 되는 스크롤값을 먼저 구해줍니다. 브라우저의 좌측 하단에 표시할 info 박스에 스크롤값이 나타나도록 querySelector를 사용하여 작업해 주었습니다.

3. 스크롤값에 따라 각 콘텐츠들이 나타나도록 작업하기

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 = `translateY(${offset2}px)`;

먼저, 이미지, 글자, 숫자의 선택자를 각각 작성해 줍니다.
각각의 offset 값은 scrollTop에서 각 콘텐츠들의 offsetTop값을 빼준 형태입니다. 이는 사실적으로 이론상 동일한 값이지만, 오차는 존재합니다. 그에 따라 움직임의 속도를 조절하기 위해서 숫자를 곱해준 것입니다. 숫자가 커지면 보다 큰 움직임을 나타냅니다.
위와 같이 자바스크립트로 transform 속성을 부여하는 방법을 사용할 수도 있지만, 아래와 같이 GSAP를 사용하면 더 부드러운 애니메이션을 작업할 수 있습니다.

4. GSAP로 더 부드러운 움직임 구현하기

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

    gsap.to(target1, { duration: 0.3, y: offset, ease: "power4.out" });
    gsap.to(target2, { duration: 0.3, y: offset2 });
    gsap.to(target3, { duration: 0.3, y: offset3, ease: "expo.out" });
}

gsap 링크를 연결하고, 적용 시간(duration), 효과(ease) 등을 설정해 줍니다. power, expo 등은 GSAP의 움직임 효과들 중 하나입니다. GSAP 홈페이지에서 메뉴 중 DOCS(여기)에 들어가면 다양한 효과를 볼 수 있습니다.

---

결과

원본 소스 보기 원본 사이트 보기