滚动视差小记

经常在手机的资讯页面看到这种效果,今天研究了下,原来好简单,不过是用了一个平常几乎不用的css属性:background-attachment
它有3个值:
1.fixed——表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。
2.scroll——表示背景相对于元素本身固定, 而不是随着它的内容滚动。
3.local——表示背景相对于元素的内容固定。如果一个元素拥有滚动机制,背景将会随着元素的内容滚动, 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
demo在下面

这种效果移动的只是视口,背景图始终是固定死的。

还有一种方式:使用 transform: translate3d 实现滚动视差
贴代码:

以后有新发现再继续补充,小伙伴们共勉!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复