좌우 이동을 위한 스크롤

스크롤 시 요소를 수평으로 이동하고 페이드하는 연속 애니메이션에 대한 페이지 스크롤 애니메이션을 설정합니다.

이 튜토리얼에서 다룰 내용은 다음과 같습니다.

  1. 스크롤 애니메이션 설정
  2. 수평 이동 포함
  3. 투명 효과 구현
  4. 두 번째 단계로 강화

스크롤 애니메이션 설정

  1. 상호 작용 패널 내 현재 페이지 메뉴에서 페이지가 스크롤되는 동안을 선택합니다.
  2. On Scroll 섹션에서 Play Scroll Animation을 선택하세요.
  3. 스크롤 애니메이션 옆에 있는 추가 기호를 누르세요.
  4. 제목을 지정합니다(예: Hero Scroll Animation).

수평 이동 포함

  1. 요소가 선택되었는지 확인하세요.
  2. 상호 작용 패널에 있는 동안 타임라인의 추가 기호를 탭하세요.
  3. 이동 선택
  4. 움직임을 위해 x축을 0픽셀로 조정합니다.

투명 효과 구현

  1. 다른 작업을 소개하려면 추가 기호를 사용하세요.
  2. 불투명도 선택
  3. 불투명도가 100%로 구성되어 있는지 확인하십시오.

계속해서 각 대상 요소에 이동 및 투명도 작업을 적용합니다.

두 번째 단계로 강화

  1. 요소 선택 확인
  2. 상호 작용 패널에서 x축을 수정하여 요소를 왼쪽(예: -900픽셀)으로 이동합니다.
  3. 다른 불투명도 작업을 추가하려면 이 요소에 대한 타임라인 하단 끝에 있는 추가 기호를 클릭하세요.
  4. 불투명도를 0%로 조정합니다.

각 요소에 대해 이 프로세스를 반복하여 x축 값을 적절하게 조정합니다(예: 왼쪽 대신 오른쪽으로 이동하려면 900픽셀). 

실시간 미리보기를 활성화하여 효과를 실시간으로 확인하세요.

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