滚动动画在我们浏览一些网站的时候经常看到(苹果官网,oppo官网,等等). 但是我们今天不是讲如何使用代码来实现,而是讲一下在Framer 里面如何实现. 且非常容易就可以实现酷炫的滚动动画效果, 给网站添加丰富的视觉和交互体验.
第一个效果,滚动时,文本从四个方向淡入出现
看效果:
具体步骤:
- 首先给下面两个大盒子设置一个滚动部分属性的编写.分别设置好
名称就可以了,这是为了我们之后设置滚动动画的时候打好铺垫
041c7de9abb5e65bb69521b482e2b0ee.png
image.png- 添加滚动动画
点击文本元素 ==> 右侧属性面板找到Effect ==> 添加一个Scroll Transform ==> 点击Transfrom 进行属性编辑
Form 从opacity透明度0.1 的状态下,并且初始位置在原来位置向左偏移240的px单位的情况下 ==> 到初始状态.
image.png
image.png向左淡入, 向右淡入,从上淡入,从下淡入效果和上面实现的方式一样, 只需要修改偏移量
Offset的值即可.
- 对于x, 负数:表示向左位移; 正数:表示向右位移.
- 对于y, 负数:表示向上位移; 正数:表示向下位移.
第二个效果, 滚动时,图片进行3D方向的偏移
看效果:
具体步骤:
- 开启透视
- 点击图片,在右侧属性面板找到
Transforms添加Preserve 点击yes即可开启透视
- 点击图片,在右侧属性面板找到
- 添加
过渡动画即(Scroll Transform), 在编辑页面,设置3d的X方向的值
第三个效果, 滚动时,重叠的多张图片向四个方向进行偏移
具体步骤:
- 设置每个图片为绝对定位,然后依次叠放在一起,并且左侧拉开一小段距离
- 给每个图片添加一个滚动过渡, 依次从
初始状态到左上右上,左下右下,四个方向的偏移值. - 然后进行调试优化就可以, 如果觉得过渡动画不喜欢,可以自定义配置选项.
第四个效果, 结合 粘性布局 滚动动画实现视差
看下效果:
分析:
首先滚动美女姐姐照片的时候, 图片粘在屏幕上,不会随着滑轮滚动而滚动.
其次再滚动的时候, 图片透明度减小,并且大小进行缩小.
然后下面的标题从大变小,图片从小到大, 并且在滚动到这个部分的底部的时候,滚动动画完成
图片的变化和 下面的文本,图片状态变化是同步的,也就是说
触发的时机是一致的
实操:
粘性定位
首先设置图片所在的层的布局方式为粘性布局. 即sticky, 下面的top属性选择-600,即到了该层的h600px的位置粘性. (可能我表达的不准确,欢迎大家纠正.
