자바스크립트 패럴랙스 효과 : 나타나기

자바스크립트 : 패럴랙스 효과 : 나타나기

자바스크립트의 다양한 효과들 중, 패럴랙스 효과입니다. 이번에는 패럴렉스 효과 1번과 같은 메뉴 디자인이지만, 스크롤의 위치에 따라 콘텐츠의 각 내용물들이 순차적으로 나타나는 유형을 작업해 보도록 하겠습니다.

---

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

2-1) addEventListener

window.addEventListener("scroll", 함수명);

지금까지는 addEventListener로 스크롤 이벤트를 작업해 주었습니다. 그러나, 이 방법은 스크롤을 매번 감지하기 때문에 버벅거림 현상이 나타날 수 있습니다. 따라서 이번에는 재귀함수를 사용하여 작업을 하도록 하겠습니다.

2-2) 재귀함수(Recursion)

function scroll() {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.screenY;
    document.querySelectorAll(".content__item").forEach((item) => {
        if (scrollTop > item.offsetTop - window.innerHeight / 2) {
            item.classList.add("show");
        }
    });
    requestAnimationFrame(scroll);
}
scroll();

재귀함수는 자기 스스로를 다시 호출해 반복적으로 작업을 수행합니다.
requestAnimationFrame 함수는 자바스크립트에서 애니메이션을 구현하기 위해 빈번하게 사용됩니다. 애니메이션이 실행되는 환경에 관계 없이 적절한 프레임 속도로 실행되기 때문에 버벅거림을 최소화하여 브라우저에 최적화된 함수입니다.

2. CSS로 애니메이션 효과 주기

2-1) 한번에 나타나게 하기

#contents > section {
    opacity: 0;
    transition: all 1s;
}
#contents > section.show {
    opacity: 1;
} 

최종 목표는 각 섹션의 번호, 제목, 사진, 글자가 순차적으로 나타나게 하는 것이지만, 시험 삼아 한번에 나타나도록 먼저 작업해 보았습니다. 한번에 나타나는 것도 괜찮은 듯...

2-2) 순차적으로 나타나게 하기

#contents > section .content__item__num {
    opacity: 0;
    transform: translateY(200px);
    transition: all 1s 0.1s cubic-bezier(0.42, 0, 0.64, 1.07);
}
#contents > section .content__item__title {
    opacity: 0;
    transform: translateX(-100px);
    transition: all 1s 0.3s cubic-bezier(0.42, 0, 0.64, 1.07);
}
#contents > section .content__item__imgWrap {
    opacity: 0;
    transform: translateY(200px) rotate(30deg) skew(20deg);
    transition: all 1s 0.6s cubic-bezier(0.42, 0, 0.64, 1.07);
}
#contents > section .content__item__desc {
    opacity: 0;
    transform: translateX(-200px);
    transition: all 1s 0.9s cubic-bezier(0.42, 0, 0.64, 1.07);
}
#contents > section.show .content__item__num {
    opacity: 0.07;
    transform: translateY(0);
}
#contents > section.show .content__item__title {
    opacity: 1;
    transform: translateX(0);
}
#contents > section.show .content__item__imgWrap {
    opacity: 1;
    transform: translateY(0) rotate(0) skew(0);
}
#contents > section.show .content__item__desc {
    opacity: 1;
    transform: translateX(0);
}
#contents > section:nth-child(even) .content__item__title {
    transform: translateX(100px);
}
#contents > section:nth-child(even).show .content__item__title {
    transform: translateX(0);
}
#contents > section:nth-child(even) .content__item__desc {
    transform: translateX(200px);
}
#contents > section:nth-child(even).show .content__item__desc {
    transform: translateX(0);
}

각각의 콘텐츠에 opacity, transform 초기 값을 설정해 주었습니다. 이후, show 클래스가 추가되었을 때 애니메이션이 나타나도록 효과를 주었습니다. 짝수 번째의 텍스트는 오른쪽 정렬이 되어있기 때문에, 홀수 번째의 텍스트는 왼쪽에서, 짝수 번째의 텍스트는 오른쪽에서 나타나도록 nth-child(even)을 사용하여 작업해 주었습니다.
transition의 경우 cubic-bezier를 사용하여 작업해 주었는데, 이것은 검사(F12)에서 곡선을 조절하며 각 수치에 따른 애니메이션을 시험해 보고, 적절한 수치를 찾아 적용해 주었습니다.

---

결과

주말은 왜이리 짧은 걸까요?

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