建立滾動進度指示器

建立一個水平進度指示器,隨著訪客向下捲動頁面而縮放。

捲動進度指示器可協助使用者追蹤他們在頁面上的位置。 

在本教程中:

  1. 制定進度條
  2. 建立滾動觸發器
  3. 組織滾動動畫
  4. 封面改動起源

制定進度條

  1. 生成一個 分區塊
  2. 給它貼上標籤
  3. 設定背景顏色以獲得更好的可見性
  4. 將其放置在您想要的位置
  5. 為其指定寬度 100%
  6. 分配高度(例如,10 像素)
  7. 將其放置在視窗的左上角
  8. 分配足夠高的 z-index 值以確保其保持在頂部 

建立滾動觸發器

來自 頁面觸發 選單內的 互動 面板,選擇 當頁面滾動時

這裡的所有都是它的!如此簡單。

組織滾動動畫

  1. 滾動時 選單中的 互動 面板,選擇 播放滾動動畫
  2. 毗鄰 滾動動畫,點選加法符號
  3. 為其命名(例如“滾動進度”)
  4. 確保選擇了您的元素,然後按一下 0% 處的加法符號並選擇 規模 從清單中
  5. 下面 規模,修改x軸位置為0
  6. 點選 100% 及下方的進度欄 規模 將 x 軸位置切換為 1

封面改動起源

  1. 在裡面 風格 面板,捲動到 效果
  2. 其他選項 旁邊的圖示(省略號) 2D 和 3D 變換
  3. 分配 起源 向左轉
麥伊凡
Ewan Mak 的最新帖子 (看全部)