今天小编跟大家讲解下有关使用CSS3来实现滚动视差效果的教程 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关使用CSS3来实现滚动视差效果的教程 的相关资料，希望小伙伴们看了有所帮助。
“视差(parallax)”效果现在在互联网上越来越流行了。如果你还没听说过什么是视差效果 它其实就是利用图片形成不同的层 分别以不同的速度 不同的方向移动产生的效果。这会产生出很奇妙的视觉效果 能有力的吸引住浏览者的目光。
观看演示
在web设计中 最常见的实现视差效果的方式是使用jQuery插件。但这种方法有一些弊端。这些插件大多都是在window对象的scroll事件上放置监听器。这会导致Javascript需要处理大量的事件触发(处理scroll事件很容易造成浏览器性能问题 使用时需要非常小心。)移动不同的层 计算背景的位置 设置图片的属性 这都引起了大量的DOM操作。
简言之 使用Javascript来实现视差效果会让页面的滚动出现性能问题 出现卡顿。
background-attachment属性回顾background-attachment -- 定义背景图片随滚动轴的移动方式取值: scroll | fixed | inheritscroll: 随着页面的滚动轴背景图片将移动fixed: 随着页面的滚动轴背景图片不会移动inherit: 继承初始值: scroll继承性: 否适用于: 所有元素background:背景.attachment:附着.示例
CSS Code复制内容到剪贴板 body { background-image:url('list-orange.png'); background-attachment:fixed; background-repeat:repeat-x; background-position:centercenter; }屏幕的背景图片为一条橙色线.随着滚动轴移动,橙色线的视觉位置不变.CSS background-attachment 属性示例
使用background-attachment: fixed实现视差效果
为什么只有一小部分人知道 这种效果实际上可以用CSS实现。
为了实现视差效果 多个背景图片必须放置在不同的元素上。这些背景图需要定义成background-attachment: fixed。通过设定background-attachment 我们可以改变背景图像的效果和位置。
background-attachment的缺省值是scroll 也就是背景图片和内容的位置是相对静止的。这我们大家都见过 当我们上下滚动一个网页时 背景和内容一起滚动。
当把background-attachment设置成fixed时 事情会变得有趣。fixed是说背景图片不随内容一起滚动 而是跟窗口保持静止。也就是说 当你拖动滚动条时 背景图片没有变化。这就能够产生漂亮的视差效果。
让我看一个实际实现：
CSS Code复制内容到剪贴板 <!--Fourcontainersforsettingthebackgroundimages--> <divclass="parallax"> <divclass="bg__foo">foo</div> <divclass="bg__bar">bar</div> <divclass="bg__baz">baz</div> <divclass="bg__bazz">bazz</div> </div> //settingbasestylestoimagecontainers [class*="bg__"]{ height:50vh; text-indent:-9999px; background-attachment:fixed; background-position:centercenter; background-size:cover; &:nth-child(2n){ box-shadow:inset001em#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会导致浏览器更多的渲染 也会影响浏览器滚动的效率。所以 开发时一定要多做测试 视性能情况而决定实现的效果。
来源：爱蒂网
