第一个效果,滚动时,文本从四个方向淡入出现
看效果:
具体步骤:
首先给下面两个大盒子设置一个滚动部分属性的编写.分别设置好名称就可以了,这是为了我们之后设置滚动动画的时候打好铺垫
添加滚动动画
点击文本元素...Transform), 在编辑页面,设置3d的X方向的值
第三个效果, 滚动时,重叠的多张图片向四个方向进行偏移
具体步骤:
设置每个图片为绝对定位,然后依次叠放在一起,并且左侧拉开一小段距离
给每个图片添加一个滚动过渡...然后下面的标题从大变小,图片从小到大, 并且在滚动到这个部分的底部的时候,滚动动画完成
图片的变化和 下面的文本,图片状态变化是同步的,也就是说触发的时机是一致的
实操:
粘性定位
首先设置图片所在的层的布局方式为粘性布局...注意点:
设置好上方之后, 需要把该层的所有父元素的overflow 设置为 可见, 粘性元素才能起效
Sticky will only work if all parent layers have...仅当所有父图层的溢出都设置为可见时,粘性才会起作用,这可能会导致移动设备出现问题。具体来说,网页中的溢出元素(如下图所示)可能会导致网站在移动设备上水平滚动,从而导致不需要的结果。