在卷轴上显示元素
创建一个触发器,当您向下滚动页面时,淡入并移动元素。
本视频采用了旧的用户界面。更新版本即将到来!
淡出和移动页面元素滚动。
在这节课中:
- 创建触发器
- 创建动画
- 将动画应用到其他元素
创建触发器
- 选择您的触发元素(例如,Project Link)并点击进入interaction面板
- 单击元素触发器旁边的加号
- 从下拉菜单中选择滚动到视图
创建动画
- 在“当滚动到视图”下的“操作”菜单中,选择“开始动画”
- 点击定时动作旁边的加号
- 命名它(例如,Move up on scroll)
- 点击Timed Actions旁边的加号,从下拉菜单中选择Move
- 在移动下,将y轴更改为50像素
- 在定时旁边,切换到设置为初始状态
- 点击定时动作旁边的加号,从下拉菜单中选择不透明度
- 改变不透明度为0%
- 在定时旁边,切换到设置为初始状态
- 点击Timed Actions旁边的加号,从下拉菜单中选择Move
- 在“移动”下,将y轴更改为0像素
- 调整缓解和持续时间
- 在时间轴上单击0秒处的加号,从下拉菜单中选择不透明度
- 将不透明度更改为100%
- 调整缓解和持续时间
- 接下来影响选择类
- 单击带有这个类的所有元素,并选择仅带有这个类的子元素
将动画应用到其他元素
- 关闭动画,点击进入交互面板
- 在触发器设置下,确保这个动画被应用到这个类的所有元素(例如,class: Project Link)
在预览模式下检查你的工作。
尝试Webflow——它是免费的