重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

如何使用CSS3来实现滚动视差效果

本篇内容主要讲解“如何使用CSS3来实现滚动视差效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用CSS3来实现滚动视差效果”吧!

创新互联成立于2013年,先为赛罕等服务建站,赛罕等地企业,进行企业商务咨询服务。为赛罕企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。


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

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

background-attachment属性回顾
background-attachment -- 定义背景图片随滚动轴的移动方式
取值: scroll | fixed | inherit
scroll: 随着页面的滚动轴背景图片将移动
fixed: 随着页面的滚动轴背景图片不会移动
inherit: 继承
初始值: scroll
继承性: 否
适用于: 所有元素
background:背景.attachment:附着.
示例

CSS Code复制内容到剪贴板

  1. body    

  2. {   

  3.  background-image:url('list-orange.png');   

  4.  background-attachment:fixed;   

  5.  background-repeat:repeat-x;   

  6.  background-position:center center;   

  7. }  

屏幕的背景图片为一条橙色线.随着滚动轴移动,橙色线的视觉位置不变.
CSS background-attachment 属性示例

使用background-attachment: fixed实现视差效果

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

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

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

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

让我看一个实际实现:

CSS Code复制内容到剪贴板

  1.   

  2.   

  3.   foo

  

  •   bar

  •   

  •   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(   

  •     /upload/otherpic48/12388.jpg   

  •   );   

  • }   

  •   

  • .bg__bar {   

  •   background-image: url(   

  •     /upload/otherpic48/12389.jpg   

  •   );   

  • }   

  •   

  • .bg__baz {   

  •   background-image: url(   

  •     /upload/otherpic48/12390.jpg   

  •   );   

  • }   

  •   

  • .bg__bazz {   

  •   height: 100vh;   

  •   

  •   background-image: url(   

  •     /upload/otherpic48/12388.jpg   

  •   );   

  • }  

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


    观看演示


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

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

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

    到此,相信大家对“如何使用CSS3来实现滚动视差效果”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


    当前名称:如何使用CSS3来实现滚动视差效果
    新闻来源:http://cqcxhl.cn/article/ggseeh.html

    其他资讯

    在线咨询
    服务热线
    服务热线:028-86922220
    TOP