构建滚动进度指示器

创建一个水平进度指示器,当访问者向下滚动页面时,该指示器会缩放。

滚动进度指示器可帮助用户追踪他们在页面上的位置。 

在本教程中:

  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 的最新帖子 (查看全部)