回到所有的课程
课程库

滚动条的水平移动

为连续动画设置页面滚动动画,在滚动上水平移动和褪色元素。

这个视频的特点是一个旧的UI。更新版本即将发布!

在这节课中:

  1. 设置页面滚动动画
  2. 添加一个移动动作
  3. 添加一个不透明度动作
  4. 补充第二点


设置页面滚动动画

  1. 在“交互”面板中,从“当前页面”菜单中选择“当页面正在滚动时”
  2. 在“滚动”下,选择“播放滚动动画”
  3. 单击滚动动画旁边的加号
  4. 命名它(例如,英雄卷轴动画)


添加一个移动动作

  1. 确保您的元素被选中
  2. 仍然在交互面板中,单击时间轴上的加号
  3. 选择移动
  4. 在移动下,改变x轴为0像素


添加一个不透明度动作

  1. 单击加号可添加另一个操作
  2. 选择不透明度
  3. 确保不透明度设置为100%


为你想要的每个元素重复移动和不透明度操作。


补充第二点

  1. 确保您的元素被选中
  2. 在交互面板中,改变x轴使元素向左移动(例如,移动到-900像素)
  3. 单击时间轴末端底部的加号,为该元素添加另一个不透明度动作
  4. 改变不透明度为0%


对每个x轴值不同的元素重复此操作(例如,向右移动900像素而不是向左移动)


切换“实时预览”到“打开”以查看工作的运行情况。


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