이야기에 앞서
Elementor의 기본 기능 중 가장 취약한 부분이 바로 스크롤 트리거라 할 수 있다. Pro 버전에서 제공하는 Motion Effects는 스크롤에 의한 ‘점진적’ 효과를 위한 것으로, 일반적으로 널리 사용되는 트리거 방식과는 거리가 있어 사용하는데 제약이 따른다.
GSAP ScrollTrigger 같은 외부 라이브러리를 사용하려면 덩치 큰 리소스를 2개씩 불러오고 API 사용법도 알아야한다. 이런 기능 하나를 구현하려고 올인원 애드온을 설치하기도 곤란하다. 엘리멘터를 오랫동안 잘 유지 관리하려면 어떻게든 외부 리소스에 대한 의존성을 최대한 줄여야 한다.
이 글에서 소개할 스크롤 트리거는 자바스크립트를 통해 웹 페이지 요소의 가시성 변화를 비동기적으로 감지하는 Intersection Observe API와 CSS만으로 구현하였다. 의존성과 호환성에서 자유롭고 코드의 길이도 짧아 Global Widget으로 등록해 두고 사용하면 어떤 페이지에서든 쉽게 스크롤 트리거를 구현할 수 있다.
기능구현 자체는 엘리멘터 무료 버전도 상관없지만 Custom CSS 기능을 활용하기 위해 엘리멘터 Pro 버전이 필요하다.
작동 예시는 본 페이지 최상단의 비디오 플레이어에서 확인할 수 있으며, 이와는 다른 형태의 스크롤 트리거를 찾는다면,
- 엘리멘터에서 스크롤 트리거를 구현하는 가장 쉬운 방법 포스트에서는 자바스크립트 코드 없이 특정 요소를 트리거하는 방법을 제공한다.
- Imran Siddiq – Web Squadron에서 소개하는 Your Website Needs This Scroll Magic 영상도 참고하면 좋다. 하지만 이 방법은
display: content를 사용하므로 호환성 문제를 주의하도록 한다.
어떻게 진행할 것인가?
이번 포스트에서 다룰 스크롤 트리거를 구현하려면 단순히 글을 읽거나 영상으로 처음부터 끝까지 따라하는 방식으로는 무리가 있다. 자바스크립트도 보아야하고 엘리멘터 에디터의 레이아웃도 구성해야 한다. 따라서 이미 만들어진 견본을 통해 시간과 비용을 절약하도록 한다.
구조와 동작방식
여기서는 스크롤 트리거가 작동하는 큰 구조를 간단히 설명한다. 가볍게 보고 넘어가면 되겠다. 자바스크립트를 명시할 HTML Widget, 뷰포트에 들어오는 트리거 요소, 트리거 요소와 동일한 갯수를 가진 반응 요소 총 3개다.
- 모든 트리거 요소에
.vertical-reveal-trigger클래스를 붙인다. - 자바스크립트는 해당 클래스를 가진 요소가 뷰포트의 특정 경계값에 도달하면, 동일한 순서에 위치한 반응 요소(
.item)에.active클래스를 추가한다. .active클래스가 추가된 반응 요소는 이제 CSS에서 애니메이션을 처리할 수 있다.- 템플릿에는 4개의 Call to Action 위젯이 트리거 요소(
.vertical-reveal-trigger)이며, 반응 요소(.item)는 3개의 이미지와 1개의 컨테이너로 구성되었다. 트리거 요소와 반응 요소는 1:1 한 쌍이므로 반드시 갯수가 동일하여야 한다. - 트리거 요소와 반응 요소 모두 어떤 위젯을 사용하든 상관없다. 단지 각 기능에 맞는 클래스(
.vertical-reveal-trigger와.item클래스)만 추가해 놓으면 된다.
자바스크립트 코드
HTML Widget의 코드 필드는 매 타이핑마다 내부 코드를 실행하므로 메모리와 이벤트를 누적시키고 편집화면에서의 정상적인 작동을 보장하지 않는다. 따라서 편집 환경에서는 가시경계를 감지하는 코드가 실행되지 않도록 DOMContentLoaded 이벤트를 사용하였다. 해당 이벤트는 편집환경에서 실행되지 않도록 엘리멘터 내부에서 막아놓고 있다. 코드 테스트는 미리보기 화면에서 확인한다.
요소의 편집, 추가 및 삭제
요소 편집
트리거 요소는 일반적인 DOM 흐름선상에 있어 문제가 없지만, 우측에 position: sticky로 고정되는 이미지는 편집 환경에서 opacity: 1로 설정해 놓았기 때문에 모두 겹쳐 보이게 된다. 레이어 패널의 눈동자 아이콘을 토글해가며 편집하면 된다.
요소의 추가 / 삭제
요소를 추가하거나 삭제 할 때는 반드시 트리거 요소와 반응 요소의 갯수를 동일하게 맞춰야 한다. 트리거 요소(좌측 Call to Action 위젯)를 하나 지웠다면 반응 요소(우측 Image Widget 혹은 커스텀 컨테이너)도 지워야 한다. 추가 할 때도 마찬가지다.
요소의 복사
다운받은 템플릿에서 스크롤 트리거 부분만 복사해서 다른 페이지에 붙여넣을 때는 🚀 jetcraft-section-scrollTrigger-02 레이어만 복사하면 된다.
원하는 요소에 트리거 붙이기
웹페이지의 아무 요소에나 .basic-reveal-trigger 클래스를 추가하면 해당 요소는 뷰포트에서 감지된다. 해당 클래스를 가진 요소는 opacity: 0 transform: translateY(60px)의 초기값을 부여받는다. 해당 요소가 뷰포트 하단으로부터 30%에 해당하는 위치에 도달하면 opacity: 1 transform: translateY(0)으로 애니메이션 된다.
지연시간 추가
한 줄에 여러 요소가 배치되어 있다면 delay-xx 클래스를 추가해 Stagger 효과를 줄 수 있다. 첫 번째 요소는 지연시간이 필요 없으므로 그 다음 요소들에 대해 추가한다. delay-01은 0.1초의 지연을 의미하고, delay-08은 0.8초를 의미한다.
- 첫 번째 요소는 지연시간이 없으므로
basic-reveal-trigger클래스만 추가한다. - 두 번째 요소는 basic-reveal-trigger와 delay-01을 추가해 0.1초 후에 나타나도록 한다.
- 세 번째 요소는 basic-reveal-trigger와 delay-02을 추가해 0.2초 후에 나타나도록 한다.
- 그러면 각 요소는 0.1초의 텀을 두고 애니메이션 한다.
- 이러한 설정은
Settings - jetcraft-section-scrollTrigger-02레이어의Custom CSS필드에 명시되어 있다.
사용자정의 효과
템플릿의 Item B 항목의 두 번째 요소는 다른 요소들과 달리 변형된 애니메이션을 가지고 있다. 트리거 요소에 사용자정의 효과를 넣고 싶다면 간단히 해당 요소의 Custom CSS 필드에 다음과 같이 정의할 수 있다.
모바일 기기 대응
고정 이미지와 Call To Action으로 이루어진 스크롤 트리거
고정 이미지와 Call To Action으로 이루어진 스크롤 트리거는 서로 완전히 분리된 블록에 위치하기 때문에 사실 모바일 기기에서 구현하기가 까다롭다. 그래서 Web Squadron에서는 display: content 속성을 사용해 모든 블록을 Flattern(부모나 조상의 블록 구조를 무시하고 렌더링)해서 각 요소에 Order를 지정해 이 문제를 해결했지만, 복잡성과 호환성 문제가 있어 사용하지 않았다.
생각을 조금 바꿔서, 트리거 요소를 Call To Action이나 Image Box 같은 위젯으로 사용하면 텍스트와 이미지를 제공할 수 있으므로 모바일 기기에서만 이미지가 노출되도록 CSS를 정의하면 이 문제는 간단히 해결된다.
모바일 기기에서는 애니메이션 Behavior가 사용자로부터 부정적인 반응을 이끌어내므로 비활성화하였다.
웹페이지 내 아무 요소에나 사용하는 스크롤 트리거
basic-reveal-trigger 클래스를 추가한 요소들은 모바일에서도 현재는 작동하도록 놔두었다. 하지만 실제 사용시에는 @media(max-width: 767px) 미디어 쿼리를 사용해 애니메이션 효과를 비활성화 하는 것이 좋겠다.