滚动动画在我们浏览一些网站的时候经常看到(苹果官网,oppo官网,等等). 但是我们今天不是讲如何使用代码来实现,而是讲一下在Framer 里面如何实现....==> 右侧属性面板找到Effect ==> 添加一个Scroll Transform ==> 点击Transfrom 进行属性编辑
Form 从opacity透明度0.1 的状态下,并且初始位置在原来位置向左偏移...第二个效果, 滚动时,图片进行3D方向的偏移
看效果:
具体步骤:
开启透视
点击图片,在右侧属性面板找到 Transforms 添加Preserve 点击yes即可开启透视
添加过渡动画即(Scroll...然后下面的标题从大变小,图片从小到大, 并且在滚动到这个部分的底部的时候,滚动动画完成
图片的变化和 下面的文本,图片状态变化是同步的,也就是说触发的时机是一致的
实操:
粘性定位
首先设置图片所在的层的布局方式为粘性布局...仅当所有父图层的溢出都设置为可见时,粘性才会起作用,这可能会导致移动设备出现问题。具体来说,网页中的溢出元素(如下图所示)可能会导致网站在移动设备上水平滚动,从而导致不需要的结果。