CSS3滚动视差效果的制作技巧 WEB骇客_H5之家 - 中国HTML5教程资源分享第一站

“视差(parallax)”效果现在在互联网上越来越流行了。如果你还没听说过什么是视差效果，它其实就是利用图片形成不同的层，分别以不同的速度，不同的方向移动产生的效果。这会产生出很奇妙的视觉效果，能有力的吸引住浏览者的目光。

观看演示

在web设计中，最常见的实现视差效果的方式是使用jQuery插件。但这种方法有一些弊端。这些插件大多都是在window对象的scroll事件上放置监听器。这会导致JavaScript需要处理大量的事件触发(处理scroll事件很容易造成浏览器性能问题，使用时需要非常小心。)移动不同的层，计算背景的位置，设置图片的属性，这都引起了大量的DOM操作。

简言之，使用JavaScript来实现视差效果会让页面的滚动出现性能问题，出现卡顿。

使用CSSbackground-position: fixed实现视差效果

为什么只有一小部分人知道，这种效果实际上可以用CSS实现。

为了实现视差效果，多个背景图片必须放置在不同的元素上。这些背景图需要定义成background-attachment: fixed。通过设定background-attachment，我们可以改变背景图像的效果和位置。

background-attachment的缺省值是scroll，也就是背景图片和内容的位置是相对静止的。这我们大家都见过，当我们上下滚动一个网页时，背景和内容一起滚动。

当把background-attachment设置成fixed时，事情会变得有趣。fixed是说背景图片不随内容一起滚动，而是跟窗口保持静止。也就是说，当你拖动滚动条时，背景图片没有变化。这就能够产生漂亮的视差效果。

让我看一个实际实现：

<div> <div>foo</div> <div>bar</div> <div>baz</div> <div>bazz</div> </div> // setting base styles to image containers [class*="bg__"] { height: 50vh; text-indent: -9999px; /* fix background */ background-attachment: fixed; /* center it */ background-position: center center; /* Scale it nicely to the element */ background-size: cover; /* just make it look a bit better */ &:nth-child(2n) { box-shadow: inset 0 0 1em #111; } } .bg__foo { background-image: url( ); } .bg__bar { background-image: url( ); } .bg__baz { background-image: url( ); } .bg__bazz { height: 100vh; background-image: url( ); }

关于这种技术的浏览器兼容情况，你可以参考，基本上，现代浏览器和IE9+的浏览器都支持。

观看演示

对我个人而言，我更喜欢CSS技术实现的视差效果，而不是用JavaScript。用CSS实现，是受浏览器原生支持，没有编程逻辑，没有对DOM额外的操作，使得整个方案非常的简洁漂亮。

即使是CSS实现的视差效果，也会给浏览器带来负担。

background-attachment: fixed会导致浏览器更多的渲染，也会影响浏览器滚动的效率。所以，开发时一定要多做测试，视性能情况而决定实现的效果。

分享这篇文章：

诺尘说道：

2014年7月11日下午6:36

文章真不错,CSS方面我还是个大菜鸟需要加强下。

发表评论

中文版濒危动物CSS碎片拼图

这里我们用纯CSS技术表现出30种动物的碎片拼图形象，这30动物，非常的可爱，但不幸的是，它们都是濒临灭绝的动物，它们的生存情况正面临着危机。

HTML5小游戏：蓝色拼图

这是一个用HTML5制作的智力游戏，有相当的难度。每个方块一面橙色，一面蓝色。点击一个方块，这个方块的颜色会翻转，并且，与它邻接的方块的颜色也会翻转。使拼板全部变成蓝色，你就算过关了。

CSS颜色混合模式

虽然并不是Adobe的Photoshop发明了混合模式，但它的实现效果是最真实的。但现在，你不需要使用Photoshop来运用混合模式美化你的图片，因为CSS3里提供里动态的实现这种效果的方法。

你能相信吗？这些都是由一个DIV元素实现的动画，纯CSS3技术

CSS3给Web程序员提供了无限发挥的创造空间，以前只有视频、Flash、JavaScript才能实现的动画效果，如今只需要纯CSS+HTML就能做到。你能相信吗？这里呈现的所有动画，都是由一个DIV元素实现，纯CSS3技术。

HTML5+CSS3特效幻灯片(impress.js)

HTML5和CSS3的诞生和普及必将对传统行业带来巨大的冲击，像微软PPT这样的软件必将慢慢转移的在线的HTML5+CSS3上，因为用HTML5+CSS3实现幻灯片不仅更简单、容易，而且功能更强调，特效更绚丽。impress.js就是这样一款可以让你轻松利用CSS3动画实现具有神奇特效的幻灯片工具。

超链接特效