#스크롤 트리거 – 01

#스크롤 트리거 – 01

써드파티 플러그인이나 소스코드 없이 워드프레스 엘리멘터 빌더의 기본 기능만으로 간단히 스크롤 트리거를 구현한 템플릿입니다.
최근 수정
2024-09-24 10:53:25
우측 "색인" 버튼으로 토글 가능합니다

템플릿에 대해

응용 예시에서 구현한 티스토리 요소는 본래 티스토리 웹사이트에서는 모바일 구성이 없지만 이 템플릿에서는 별도로 구현하였습니다.

핵심 레이어

레이어에 🚀 이모지가 있는 레이어를 복사해서 원하는 페이지에 붙여 넣습니다.

스크롤 트리거 요소 켜기 / 끄기

템플릿에서는 트리거가 어디에 위치했는지 알 수 있도록 보라색 글씨로 나타납니다. 트리거를 보이지 않게 하려면 CSS Classes 필드의 jetcraft-trigger 클래스 옆에 off 클래스를 추가합니다.

모바일 기기에서의 양쪽 여백 처리

템플릿의 응용 1응용 2 예제는 모바일 기기 상태일 때 양쪽에 24px씩의 음수 마진이 설정되어 있습니다. 이 수치는 사용자가 운영하는 사이트의 모바일 상태의 양쪽 여백에 따라 조정합니다.

음수 마진이 필요없는 경우 아래의 레이어에서 width 값인 auto를 삭제하고, Advanced 탭의 margin 값을 모두 지우거나 0으로 설정하세요.

  • 🚀 jetcraft-section-scrollTrigger-01-b
  • 🚀 jetcraft-section-scrollTrigger-01-c
커스터마이징

Jetcraft 블로그에서 스크롤 트리거에 대해 자세히 다루고 있습니다. 해당 기사는 이 템플릿을 기반으로 작성되었으므로 커스터마이징이 필요한 분은 블로그 기사를 참조하시기 바랍니다.

연관 템플릿