"视差(parallax)" 效果现在在互联网上越来越流行了. 如果你还没听说过什么是视差效果, 它其实就是利用图片形成不同的层, 分别以不同的速度, 不同的方向移动产生的效果. 这会产生出很奇妙的视觉效果, 能有力的吸引住浏览者的目光.
观看演示
在 web 设计中, 最常见的实现视差效果的方式是使用 jQuery 插件. 但这种方法有一些弊端. 这些插件大多都是在 Windows 对象的 scroll 事件上放置监听器. 这会导致 JavaScript 需要处理大量的事件触发 (处理 scroll 事件很容易造成浏览器性能问题, 使用时需要非常小心.) 移动不同的层, 计算背景的位置, 设置图片的属性, 这都引起了大量的 DOM 操作.
简言之, 使用 JavaScript 来实现视差效果会让页面的滚动出现性能问题, 出现卡顿.
使用 CSS
background-position: fixed
实现视差效果
为什么只有一小部分人知道, 这种效果实际上可以用 CSS 实现.
为了实现视差效果, 多个背景图片必须放置在不同的元素上. 这些背景图需要定义成 background-attachment: fixed. 通过设定 background-attachment, 我们可以改变背景图像的效果和位置.
background-attachment 的缺省值是 scroll, 也就是背景图片和内容的位置是相对静止的. 这我们大家都见过, 当我们上下滚动一个网页时, 背景和内容一起滚动.
当把 background-attachment 设置成 fixed 时, 事情会变得有趣. fixed 是说背景图片不随内容一起滚动, 而是跟窗口保持静止. 也就是说, 当你拖动滚动条时, 背景图片没有变化. 这就能够产生漂亮的视差效果.
让我看一个实际实现:
- <!-- Four containers for setting the background images -->
- <div class="parallax">
- <div class="bg__foo">foo</div>
- <div class="bg__bar">bar</div>
- <div class="bg__baz">baz</div>
- <div class="bg__bazz">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(
- http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax1.jpg
- );
- }
- .bg__bar {
- background-image: url(
- http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax2.jpg
- );
- }
- .bg__baz {
- background-image: url(
- http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax3.jpg
- );
- }
- .bg__bazz {
- height: 100vh;
- background-image: url(
- http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax1.jpg
- );
- }
关于这种技术的浏览器兼容情况, 你可以参考这里, 基本上, 现代浏览器和 IE9 + 的浏览器都支持.
观看演示
对我个人而言, 我更喜欢 CSS 技术实现的视差效果, 而不是用 JavaScript. 用 CSS 实现, 是受浏览器原生支持, 没有编程逻辑, 没有对 DOM 额外的操作, 使得整个方案非常的简洁漂亮.
即使是 CSS 实现的视差效果, 也会给浏览器带来负担.
background-attachment: fixed 会导致浏览器更多的渲染, 也会影响浏览器滚动的效率. 所以, 开发时一定要多做测试, 视性能情况而决定实现的效果.
来源: http://www.webhek.com/post/parallax.html