这篇文章主要介绍了使用css3来实现滚动视差效果的教程,主要使用到了background-attachment属性,需要的朋友可以参考下
“视差(parallax)”效果现在在互联网上越来越流行了。如果你还没听说过什么是视差效果，它其实就是利用图片形成不同的层，分别以不同的速度，不同的方向移动产生的效果。这会产生出很奇妙的视觉效果，能有力的吸引住浏览者的目光。
在web设计中，最常见的实现视差效果的方式是使用jQuery插件。但这种方法有一些弊端。这些插件大多都是在window对象的scroll事件上放置监听器。这会导致JavaScript需要处理大量的事件触发(处理scroll事件很容易造成浏览器性能问题，使用时需要非常小心。)移动不同的层，计算背景的位置，设置图片的属性，这都引起了大量的DOM操作。
简言之，使用JavaScript来实现视差效果会让页面的滚动出现性能问题，出现卡顿。
background-attachment属性回顾
background-attachment — 定义背景图片随滚动轴的移动方式
取值: scroll | fixed | inherit
scroll: 随着页面的滚动轴背景图片将移动
fixed: 随着页面的滚动轴背景图片不会移动
inherit: 继承
初始值: scroll
继承性: 否
适用于: 所有元素
background:背景.attachment:附着.
示例
立即学习“前端免费学习笔记（深入）”；
body { background-image:url('list-orange.png'); background-attachment:fixed; background-repeat:repeat-x; background-position:center center; }
屏幕的背景图片为一条橙色线.随着滚动轴移动,橙色线的视觉位置不变.
CSS background-attachment 属性示例
使用background-attachment: fixed实现视差效果
为什么只有一小部分人知道，这种效果实际上可以用CSS实现。
为了实现视差效果，多个背景图片必须放置在不同的元素上。这些背景图需要定义成background-attachment: fixed。通过设定background-attachment，我们可以改变背景图像的效果和位置。
background-attachment的缺省值是scroll，也就是背景图片和内容的位置是相对静止的。这我们大家都见过，当我们上下滚动一个网页时，背景和内容一起滚动。
当把background-attachment设置成fixed时，事情会变得有趣。fixed是说背景图片不随内容一起滚动，而是跟窗口保持静止。也就是说，当你拖动滚动条时，背景图片没有变化。这就能够产生漂亮的视差效果。
让我看一个实际实现：
foo
baz
bazz
// 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会导致浏览器更多的渲染，也会影响浏览器滚动的效率。所以，开发时一定要多做测试，视性能情况而决定实现的效果。
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
CSS3 3D旋转rotate效果的使用介绍
对于CSS浮动float和定位position的解析
利用css3设置没有上下边的列表间隔线的方法
以上就是使用CSS3来实现滚动视差效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610535.html
微信扫一扫 
支付宝扫一扫 
