捲動進度指示器可協助使用者追蹤他們在頁面上的位置。
在本教程中:
- 制定進度條
- 建立滾動觸發器
- 組織滾動動畫
- 封面改動起源
制定進度條
- 生成一個 分區塊
- 給它貼上標籤
- 設定背景顏色以獲得更好的可見性
- 將其放置在您想要的位置
- 為其指定寬度 100%
- 分配高度(例如,10 像素)
- 將其放置在視窗的左上角
- 分配足夠高的 z-index 值以確保其保持在頂部
建立滾動觸發器
來自 頁面觸發 選單內的 互動 面板,選擇 當頁面滾動時
這裡的所有都是它的!如此簡單。
組織滾動動畫
- 內 滾動時 選單中的 互動 面板,選擇 播放滾動動畫
- 毗鄰 滾動動畫,點選加法符號
- 為其命名(例如“滾動進度”)
- 確保選擇了您的元素,然後按一下 0% 處的加法符號並選擇 規模 從清單中
- 下面 規模,修改x軸位置為0
- 點選 100% 及下方的進度欄 規模 將 x 軸位置切換為 1
封面改動起源
- 在裡面 風格 面板,捲動到 效果
- 按 其他選項 旁邊的圖示(省略號) 2D 和 3D 變換
- 分配 起源 向左轉
Ewan Mak 的最新帖子 (看全部)
- 包含或消除工作區點和成員 - 2024 年 4 月 15 日
- 定心框總結 - 2024 年 4 月 15 日
- 儲存站點以供日後參考 - 2024 年 4 月 15 日