“视差(parallax)”效果现在在互联网上越来越流行了。如果你还没听说过什么是视差效果,它其实就是利用图片形成不同的层,分别以不同的速度,不同的方向移动产生的效果。这会产生出很奇妙的视觉效果,能有力的吸引住浏览者的目光。mDPHTML5中文学习网 - HTML5先行者学习网
观看演示mDPHTML5中文学习网 - HTML5先行者学习网
在web设计中,最常见的实现视差效果的方式是使用jQuery插件。但这种方法有一些弊端。这些插件大多都是在window对象的scroll事件上放置监听器。这会导致JavaScript需要处理大量的事件触发(处理scroll事件很容易造成浏览器性能问题,使用时需要非常小心。)移动不同的层,计算背景的位置,设置图片的属性,这都引起了大量的DOM操作。mDPHTML5中文学习网 - HTML5先行者学习网
简言之,使用JavaScript来实现视差效果会让页面的滚动出现性能问题,出现卡顿。mDPHTML5中文学习网 - HTML5先行者学习网
background-attachment属性回顾mDPHTML5中文学习网 - HTML5先行者学习网
background-attachment -- 定义背景图片随滚动轴的移动方式mDPHTML5中文学习网 - HTML5先行者学习网
取值: scroll | fixed | inheritmDPHTML5中文学习网 - HTML5先行者学习网
scroll: 随着页面的滚动轴背景图片将移动mDPHTML5中文学习网 - HTML5先行者学习网
fixed: 随着页面的滚动轴背景图片不会移动mDPHTML5中文学习网 - HTML5先行者学习网
inherit: 继承mDPHTML5中文学习网 - HTML5先行者学习网
初始值: scrollmDPHTML5中文学习网 - HTML5先行者学习网
继承性: 否mDPHTML5中文学习网 - HTML5先行者学习网
适用于: 所有元素mDPHTML5中文学习网 - HTML5先行者学习网
background:背景.attachment:附着.mDPHTML5中文学习网 - HTML5先行者学习网
示例mDPHTML5中文学习网 - HTML5先行者学习网
CSS Code复制内容到剪贴板mDPHTML5中文学习网 - HTML5先行者学习网
bodymDPHTML5中文学习网 - HTML5先行者学习网
{mDPHTML5中文学习网 - HTML5先行者学习网
background-image:url('list-orange.png');mDPHTML5中文学习网 - HTML5先行者学习网
background-attachment:fixed;mDPHTML5中文学习网 - HTML5先行者学习网
background-repeat:repeat-x;mDPHTML5中文学习网 - HTML5先行者学习网
background-position:center center;mDPHTML5中文学习网 - HTML5先行者学习网
}mDPHTML5中文学习网 - HTML5先行者学习网
屏幕的背景图片为一条橙色线.随着滚动轴移动,橙色线的视觉位置不变.mDPHTML5中文学习网 - HTML5先行者学习网
CSS background-attachment 属性示例mDPHTML5中文学习网 - HTML5先行者学习网
使用background-attachment: fixed实现视差效果mDPHTML5中文学习网 - HTML5先行者学习网
为什么只有一小部分人知道,这种效果实际上可以用CSS实现。mDPHTML5中文学习网 - HTML5先行者学习网
为了实现视差效果,多个背景图片必须放置在不同的元素上。这些背景图需要定义成background-attachment: fixed。通过设定background-attachment,我们可以改变背景图像的效果和位置。mDPHTML5中文学习网 - HTML5先行者学习网
background-attachment的缺省值是scroll,也就是背景图片和内容的位置是相对静止的。这我们大家都见过,当我们上下滚动一个网页时,背景和内容一起滚动。mDPHTML5中文学习网 - HTML5先行者学习网
当把background-attachment设置成fixed时,事情会变得有趣。fixed是说背景图片不随内容一起滚动,而是跟窗口保持静止。也就是说,当你拖动滚动条时,背景图片没有变化。这就能够产生漂亮的视差效果。mDPHTML5中文学习网 - HTML5先行者学习网
让我看一个实际实现:mDPHTML5中文学习网 - HTML5先行者学习网
CSS Code复制内容到剪贴板mDPHTML5中文学习网 - HTML5先行者学习网
mDPHTML5中文学习网 - HTML5先行者学习网
mDPHTML5中文学习网 - HTML5先行者学习网
mDPHTML5中文学习网 - HTML5先行者学习网
mDPHTML5中文学习网 - HTML5先行者学习网
foo
mDPHTML5中文学习网 - HTML5先行者学习网
mDPHTML5中文学习网 - HTML5先行者学习网
bar
mDPHTML5中文学习网 - HTML5先行者学习网
mDPHTML5中文学习网 - HTML5先行者学习网
baz
mDPHTML5中文学习网 - HTML5先行者学习网
mDPHTML5中文学习网 - HTML5先行者学习网
bazz
mDPHTML5中文学习网 - HTML5先行者学习网
mDPHTML5中文学习网 - HTML5先行者学习网
mDPHTML5中文学习网 - HTML5先行者学习网
// setting base styles to image containersmDPHTML5中文学习网 - HTML5先行者学习网
[class*="bg__"] {mDPHTML5中文学习网 - HTML5先行者学习网
height: 50vh;mDPHTML5中文学习网 - HTML5先行者学习网
text-indent: -9999px;mDPHTML5中文学习网 - HTML5先行者学习网
/* fix background */mDPHTML5中文学习网 - HTML5先行者学习网
background-attachment: fixed;mDPHTML5中文学习网 - HTML5先行者学习网
/* center it */mDPHTML5中文学习网 - HTML5先行者学习网
background-position: center center;mDPHTML5中文学习网 - HTML5先行者学习网
/* Scale it nicely to the element */mDPHTML5中文学习网 - HTML5先行者学习网
background-size: cover;mDPHTML5中文学习网 - HTML5先行者学习网
/* just make it look a bit better */mDPHTML5中文学习网 - HTML5先行者学习网
&:nth-child(2n) {mDPHTML5中文学习网 - HTML5先行者学习网
box-shadow: inset 0 0 1em #111;mDPHTML5中文学习网 - HTML5先行者学习网
}mDPHTML5中文学习网 - HTML5先行者学习网
}mDPHTML5中文学习网 - HTML5先行者学习网
.bg__foo {mDPHTML5中文学习网 - HTML5先行者学习网
background-image: url(mDPHTML5中文学习网 - HTML5先行者学习网
http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax1.jpgmDPHTML5中文学习网 - HTML5先行者学习网
);mDPHTML5中文学习网 - HTML5先行者学习网
}mDPHTML5中文学习网 - HTML5先行者学习网
.bg__bar {mDPHTML5中文学习网 - HTML5先行者学习网
background-image: url(mDPHTML5中文学习网 - HTML5先行者学习网
http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax2.jpgmDPHTML5中文学习网 - HTML5先行者学习网
);mDPHTML5中文学习网 - HTML5先行者学习网
}mDPHTML5中文学习网 - HTML5先行者学习网
.bg__baz {mDPHTML5中文学习网 - HTML5先行者学习网
background-image: url(mDPHTML5中文学习网 - HTML5先行者学习网
http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax3.jpgmDPHTML5中文学习网 - HTML5先行者学习网
);mDPHTML5中文学习网 - HTML5先行者学习网
}mDPHTML5中文学习网 - HTML5先行者学习网
.bg__bazz {mDPHTML5中文学习网 - HTML5先行者学习网
height: 100vh;mDPHTML5中文学习网 - HTML5先行者学习网
background-image: url(mDPHTML5中文学习网 - HTML5先行者学习网
http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax1.jpgmDPHTML5中文学习网 - HTML5先行者学习网
);mDPHTML5中文学习网 - HTML5先行者学习网
}mDPHTML5中文学习网 - HTML5先行者学习网
关于这种技术的浏览器兼容情况,你可以参考这里,基本上,现代浏览器和IE9+的浏览器都支持。mDPHTML5中文学习网 - HTML5先行者学习网
观看演示mDPHTML5中文学习网 - HTML5先行者学习网
对我个人而言,我更喜欢CSS技术实现的视差效果,而不是用JavaScript。用CSS实现,是受浏览器原生支持,没有编程逻辑,没有对DOM额外的操作,使得整个方案非常的简洁漂亮。mDPHTML5中文学习网 - HTML5先行者学习网
即使是CSS实现的视差效果,也会给浏览器带来负担。mDPHTML5中文学习网 - HTML5先行者学习网
background-attachment: fixed会导致浏览器更多的渲染,也会影响浏览器滚动的效率。所以,开发时一定要多做测试,视性能情况而决定实现的效果。