回到所有的课程
课程库

在卷轴上显示元素

创建一个触发器,当您向下滚动页面时,淡入并移动元素。

本视频采用了旧的用户界面。更新版本即将到来!

淡出和移动页面元素滚动。

在这节课中:

  1. 创建触发器
  2. 创建动画
  3. 将动画应用到其他元素

创建触发器

  1. 选择您的触发元素(例如,Project Link)并点击进入interaction面板
  2. 单击元素触发器旁边的加号
  3. 从下拉菜单中选择滚动到视图

创建动画

  1. 在“当滚动到视图”下的“操作”菜单中,选择“开始动画”
  2. 点击定时动作旁边的加号
  3. 命名它(例如,Move up on scroll)
  4. 点击Timed Actions旁边的加号,从下拉菜单中选择Move
  5. 在移动下,将y轴更改为50像素
  6. 在定时旁边,切换到设置为初始状态
  7. 点击定时动作旁边的加号,从下拉菜单中选择不透明度
  8. 改变不透明度为0%
  9. 在定时旁边,切换到设置为初始状态
  10. 点击Timed Actions旁边的加号,从下拉菜单中选择Move
  11. 在“移动”下,将y轴更改为0像素
  12. 调整缓解和持续时间
  13. 在时间轴上单击0秒处的加号,从下拉菜单中选择不透明度
  14. 将不透明度更改为100%
  15. 调整缓解和持续时间
  16. 接下来影响选择类
  17. 单击带有这个类的所有元素,并选择仅带有这个类的子元素

将动画应用到其他元素

  1. 关闭动画,点击进入交互面板
  2. 在触发器设置下,确保这个动画被应用到这个类的所有元素(例如,class: Project Link)


在预览模式下检查你的工作。

尝试Webflow——它是免费的
Baidu
map