滚动动画在我们浏览一些网站的时候经常看到(苹果官网
,oppo官网
,等等
). 但是我们今天不是讲如何使用代码来实现,而是讲一下在Framer
里面如何实现. 且非常容易就可以实现酷炫的滚动动画效果, 给网站添加丰富的视觉和交互体验.
看效果:
具体步骤:
名称
就可以了,这是为了我们之后设置滚动动画的时候打好铺垫点击文本元素 ==> 右侧属性面板找到Effect
==> 添加一个Scroll Transform
==> 点击Transfrom
进行属性编辑
Form 从opacity透明度0.1
的状态下,并且初始位置在原来位置向左偏移240的px单位
的情况下 ==> 到初始状态.
向左淡入, 向右淡入,从上淡入,从下淡入效果和上面实现的方式一样, 只需要修改偏移量
Offset
的值即可.
看效果:
具体步骤:
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: 文字变小, 图片变大
利用好这个滚动动画,可以创建出来很多好玩有趣创意的滚动动画.
下面是上面练习的源文件:
这个是网站: