滚动动画在我们浏览一些网站的时候经常看到(苹果官网,oppo官网,等等). 但是我们今天不是讲如何使用代码来实现,而是讲一下在Framer 里面如何实现. 且非常容易就可以实现酷炫的滚动动画效果, 给网站添加丰富的视觉和交互体验.
第一个效果,滚动时,文本从四个方向淡入出现
看效果:
具体步骤:
- 首先给下面两个大盒子设置一个滚动部分属性的编写.分别设置好
名称就可以了,这是为了我们之后设置滚动动画的时候打好铺垫
- 添加滚动动画
点击文本元素 ==> 右侧属性面板找到Effect ==> 添加一个Scroll Transform ==> 点击Transfrom 进行属性编辑
Form 从opacity透明度0.1 的状态下,并且初始位置在原来位置向左偏移240的px单位的情况下 ==> 到初始状态.
向左淡入, 向右淡入,从上淡入,从下淡入效果和上面实现的方式一样, 只需要修改偏移量
Offset的值即可.
- 对于x, 负数:表示向左位移; 正数:表示向右位移.
- 对于y, 负数:表示向上位移; 正数:表示向下位移.
第二个效果, 滚动时,图片进行3D方向的偏移
看效果:
具体步骤:
- 开启透视
- 点击图片,在右侧属性面板找到
Transforms添加Preserve 点击yes即可开启透视
- 添加
过渡动画即(Scroll Transform), 在编辑页面,设置3d的X方向的值
第三个效果, 滚动时,重叠的多张图片向四个方向进行偏移
具体步骤:
- 设置每个图片为绝对定位,然后依次叠放在一起,并且左侧拉开一小段距离
- 给每个图片添加一个滚动过渡, 依次从
初始状态到左上右上,左下右下,四个方向的偏移值. - 然后进行调试优化就可以, 如果觉得过渡动画不喜欢,可以自定义配置选项.
第四个效果, 结合 粘性布局+ 滚动动画实现视差
看下效果:
分析:
首先滚动美女姐姐照片的时候, 图片粘在屏幕上,不会随着滑轮滚动而滚动.
其次再滚动的时候, 图片透明度减小,并且大小进行缩小.
然后下面的标题从大变小,图片从小到大, 并且在滚动到这个部分的底部的时候,滚动动画完成
图片的变化和 下面的文本,图片状态变化是同步的,也就是说
触发的时机是一致的
实操:
粘性定位
首先设置图片所在的层的布局方式为粘性布局. 即sticky, 下面的top属性选择-600,即到了该层的h600px的位置粘性. (可能我表达的不准确,欢迎大家纠正.😥)
下面是官方的描述:
To make a sticky header, select it and head over the properties panel where you’ll find the Sticky property. Here you’ll see four position properties to customize its distance from top, bottom, left, and right. These properties represent the position of the sticky element relative to its parent layer.
要制作粘性标题，请选择它并转到属性面板，您可以在其中找到 Sticky 属性。在这里，您将看到四个位置属性，用于自定义其与顶部、底部、左侧和右侧的距离。这些属性表示粘性元素相对于其父层的位置。
注意点:
- 设置好上方之后, 需要把该层的所有父元素的
overflow 设置为 可见, 粘性元素才能起效Sticky will only work if all parent layers have overflow set to visible, which may cause issues on mobile. Specifically, an overflowing element in the web page (like the one pictured below) can cause the site to be scrollable horizontally on a mobile device, leading to unwanted results. To prevent this from happening, make sure to double check for overflowing elements in your page and, if necessary, wrap them in a parent layer and set its overflow property to hidden.
仅当所有
父图层的溢出都设置为可见时，粘性才会起作用，这可能会导致移动设备出现问题。具体来说，网页中的溢出元素（如下图所示）可能会导致网站在移动设备上水平滚动，从而导致不需要的结果。为防止这种情况发生，请确保仔细检查页面中是否有溢出元素，如有必要，将它们包装在父图层中，并将其溢出属性设置为隐藏。
滚动动画
From : 文字一开始设置为大号文字(size), 图片一开始设置小号图片(width + height).
To: 文字变小, 图片变大
结语:
利用好这个滚动动画,可以创建出来很多好玩有趣创意的滚动动画.
下面是上面练习的源文件:
这个是网站:
intelligent-rectangle-488580.framer.app/
