사용자가 스크롤할 때 항목 표시

페이지를 아래로 스크롤할 때 요소가 페이드되고 이동되는 트리거를 만듭니다.

페이지 스크롤 시 요소의 페이딩 및 이동과 같은 효과를 표시합니다. 

여기에서 다음을 찾을 수 있습니다:

  • 활성화 설정
  • 모션 정의
  • 다른 항목에 모션 구현

활성화 설정

  • 활성화 구성 요소(예: 프로젝트 링크)를 선택하고 상호 작용 패널에 액세스합니다.
  • 요소 트리거 옆에 있는 추가 기호를 클릭하세요.
  • 제공된 옵션에서 보기로 스크롤을 선택하세요.

모션 정의

  • 스크롤하여 보기 아래의 작업 메뉴에서 애니메이션 시작을 선택합니다.
  • 시간 제한 작업 근처에 있는 추가 기호를 누르세요.
  • 라벨 지정(예: 스크롤하는 동안 위로 이동)
  • Timed Actions 근처의 추가 기호를 클릭하고 목록에서 Move를 선택하세요.
  • 이동에서 y축을 50픽셀로 조정합니다.
  • 타이밍 옆에서 초기 상태로 설정을 활성화합니다.
  • Timed Actions 근처의 추가 기호를 누르고 목록에서 불투명도를 선택하십시오.
  • 불투명도를 0%로 수정
  • 타이밍 옆에 초기 상태로 설정
  • Timed Actions 근처의 추가 기호를 누르고 목록에서 Move를 선택하세요.
  • 이동에서 y축을 0픽셀로 변경합니다.
  • 이징 및 기간 사용자 정의
  • 타임라인의 0초 지점에서 추가 기호를 탭하고 드롭다운에서 불투명도를 선택하세요.
  • 불투명도를 100%로 조정합니다.
  • 이징 및 기간 사용자 정의
  • Affect 옆에 Class를 선택하세요.
  • 이 클래스가 있는 모든 요소를 선택한 다음 이 클래스가 있는 하위 요소만 선택합니다.

다른 항목에 모션 구현

  • 애니메이션을 종료하고 상호 작용 패널로 이동합니다.
  • 트리거 설정에서 이 애니메이션이 이 클래스가 있는 모든 요소에 적용되는지 확인하세요(예: 클래스: 프로젝트 링크).

작업을 미리 보세요.

이완 막
Ewan Mak의 최신 게시물 (모두 보기)