您现在的位置是：网站首页> 编程资料编程资料

使用CSS3来实现滚动视差效果的教程CSS3 background-image颜色渐变的实现代码CSS3混合模式mix-blend-mode/background-blend-mode简介css3实现一个div设置多张背景图片及background-image属性实例演示CSS的background属性及CSS3的背景图片设置总结CSS3属性background-size使用指南css3中背景尺寸background-size详解详解background属性的8个属性值(面试题)

2021-09-05 1191人已围观

简介 这篇文章主要介绍了使用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:附着.
示例

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. "parallax">   
  3.   "bg__foo">foo
  
  •   "bg__bar">bar
    •   
  •   "bg__baz">baz
    •   
  •   "bg__bazz">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会导致浏览器更多的渲染，也会影响浏览器滚动的效率。所以，开发时一定要多做测试，视性能情况而决定实现的效果。

    提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：CSS中行高line-height属性的一些使用技巧CSS中的line-height行高属性学习教程深入理解CSS height属性设置元素的高度CSS中的line-height行高属性的使用技巧小结css line-height属性的使用技巧css属性行高line-height的用法详解css height属性中的calc方法详解

    下一篇：CSS的注释部分编程引申CSS注释的一些高级用法CSS条件注释详解（根据不同浏览器加载CSS）常用css样式属性大全（中文注释）

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网