捲動以進行左右移動

為連續動畫設定頁面滾動動畫,該動畫在滾動時水平移動和淡入淡出元素。

這是我們將在本教程中介紹的內容:

  1. 建立滾動動畫
  2. 包括水平移動
  3. 實現透明效果
  4. 第二步增強

建立滾動動畫

  1. 在“交互”面板中,從“當前頁面”選單中選擇“頁面滾動時”
  2. 在“滾動”部分下,選擇“播放滾動動畫”
  3. 點擊滾動動畫旁邊的加號
  4. 為其分配一個標題(例如,英雄滾動動畫)

包括水平移動

  1. 確保選擇您的元素
  2. 仍在「交互」面板中時,點選時間軸上的加法符號
  3. 選擇移動
  4. 對於移動,將 x 軸調整為 0 像素

實現透明效果

  1. 使用加法符號引入另一個動作
  2. 選擇不透明度
  3. 確保不透明度配置為 100%

繼續將移動和透明度操作應用於每個目標元素。

第二步增強

  1. 確認您選擇的元素
  2. 在交互面板中,修改 x 軸以將元素向左移動(例如,移至 -900 像素)
  3. 按一下該元素時間軸底部的新增符號可附加另一個不透明度操作
  4. 將不透明度調整為0%

對每個元素重複此過程,相應地調整 x 軸值(例如,右移而不是左移 900 像素) 

啟動即時預覽以即時見證您的效果。

麥伊凡
Ewan Mak 的最新帖子 (看全部)