WordPress

CSS3 background-attachment:fixed实现滚动视差效果

LensNews

CSS3 background-attachment:fixed实现滚动视差效果一直都想设计一个有滚动视差效果的主题,而网上所有的介绍和有视差效果的主题都是使用jQuery来实现,而且由于视差背景图是一张满屏的大小,所以一直没有实现这个功能。最近在开发一个摄影/作品展示的主题,使用CSS3 background-attachment:fixed相当轻松地添加了视差滚动效果。

background-attachment 属性包括:

  • scroll,默认值,背景图像会随着页面其余部分的滚动而移动。
  • fixed,当页面的其余部分滚动时,背景图像不会移动。
  • inherit,规定应该从父元素继承 background-attachment 属性的设置


通过设定background-attachment属性值为fixed,滚动页面时就能实现视差效果,如此简单的一个功能,而且主流浏览器都支持 background-attachment 属性,为什么那么多作品中都是使用jQuery呢?

相信一个功能CSS3和jQuery都能实现的,所有前端开发人员都会选择CSS3吧,萨龙龙已经找到最佳的实现视差的方法就是CSS3的background-attachment:fixed属性。

PS:Deephoto摄影/作品展示主题已经使用了CSS3的视差效果,以及CSS3滚动动画,视觉效果与之前的主题都完全不一样。同时最大的一个亮点就是添加了自动获取图片的EXIF信息,这对于搞摄影的朋友来说是很振奋人心的功能,预计9月底上线。
演示效果萨龙龙摄影原文地址

()

本文由 远方的雪山 作者:萨龙龙 发表,转载请注明来源!

关键词:,
LensNews

热评文章

发表回复