纯css实现页面背景图分层切换效果

hy

hy

在一些图文穿插布局的网站,经常能看到一些页面,鼠标滚动时背景图片会一层一层的切换。

一开始会认为这种布局肯定很复杂,而且需要js配合才能实现该效果,其实不然。只需要使用css的background-attachment:fixed样式就能做到。

css样式background-attachment的默认值是scroll,此时背景图会随着页面的滚动而移动。将background-attachment设置为fixed时,背景图会固定,不再随页面滚动。而我们想实现的背景图分层切换效果,使用的正是这个特性。

可能有童鞋会疑惑,背景图固定了,那还怎么切换呢?别着急,先看下图。

假设整个页面由5个div构成,3个文本内容块,2个纯背景块,由上至下穿插组成一体。

其中div2和div4使用不同的图片作为背景图,且背景图要铺满div2和div4。

当div整体往上移动,浏览器视窗里刚出现div2时,由于使用了background-attachment:fixed样式,浏览者会有div1在div2上层的错觉;继续往上移动,当div3开始出现,同样会感觉div3在div2的上层;然后继续往上移动,div2移出了视窗,div4开始出现,div4同样像是在div3的下层,浏览者视觉上会认为div3划过,下层的图片就切换了。

我这里有写好的demo,还不明白的直接去看源码就行。

另外,有些浏览器对background-attachment:fixed的这种用法支持的不太好,比如IE或者旧版本的chrome,在滚动时图片会稍微有些晃动,Edge和Firefox支持的最好。

最后,手机浏览器目前不支持这种效果,如果要适配手机浏览器,需要额外的代码。

0 0 vote
Article Rating
guest
0 评论
Inline Feedbacks
View all comments
0
可以表达一下你的观点哟 ^_^x
()
x