使用CSS3来实现滚动视差效果的教程


Posted in HTML / CSS onAugust 24, 2015

“视差(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. <!-- Four containers for setting the background images -->   
  2. <div class="parallax">   
  3.   <div class="bg__foo">foo</div>   
  4.   <div class="bg__bar">bar</div>   
  5.   <div class="bg__baz">baz</div>   
  6.   <div class="bg__bazz">bazz</div>   
  7. </div>   
  8. // setting base styles to image containers   
  9. [class*="bg__"] {   
  10.   height: 50vh;   
  11.   
  12.   text-indent: -9999px;   
  13.   
  14.   /* fix background */  
  15.   background-attachmentfixed;   
  16.   
  17.   /* center it */  
  18.   background-positioncenter center;   
  19.   
  20.   /* Scale it nicely to the element */  
  21.   background-size: cover;   
  22.   
  23.   /* just make it look a bit better  */  
  24.   &:nth-child(2n) {   
  25.     box-shadow: inset 0 0 1em #111;   
  26.   }   
  27. }   
  28.   
  29. .bg__foo {   
  30.   background-imageurl(   
  31.     http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax1.jpg   
  32.   );   
  33. }   
  34.   
  35. .bg__bar {   
  36.   background-imageurl(   
  37.     http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax2.jpg   
  38.   );   
  39. }   
  40.   
  41. .bg__baz {   
  42.   background-imageurl(   
  43.     http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax3.jpg   
  44.   );   
  45. }   
  46.   
  47. .bg__bazz {   
  48.   height: 100vh;   
  49.   
  50.   background-imageurl(   
  51.     http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax1.jpg   
  52.   );   
  53. }  

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

观看演示

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

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

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

HTML / CSS 相关文章推荐
css3个性化字体_动力节点Java学院整理
Jul 12 HTML / CSS
CSS3教程(2):网页边框半径和网页圆角
Apr 02 HTML / CSS
CSS3 Backgrounds属性相关介绍
May 11 HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
HTML5 Canvas标签使用收录
Jul 07 HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
Dec 20 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
Mar 31 HTML / CSS
CSS3中的opacity属性使用教程
Aug 19 #HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 #HTML / CSS
详解CSS3中使用gradient实现渐变效果的方法
Aug 18 #HTML / CSS
全方位了解CSS3的Regions扩展
Aug 07 #HTML / CSS
CSS3中Animation属性的使用详解
Aug 06 #HTML / CSS
利用CSS3的transition属性实现滑动效果
Aug 05 #HTML / CSS
详解CSS3中@media的实际使用
Aug 04 #HTML / CSS
You might like
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
[JS]点出统计器
2020/10/11 Javascript
解放web程序员的输入验证
2006/10/06 Javascript
Prototype使用指南之selector.js说明
2008/10/26 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
JavaScript工具库MyTools详解
2020/01/01 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
用python写asp详细讲解
2013/12/16 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
Python实现的建造者模式示例
2018/08/06 Python
python矩阵的转置和逆转实例
2018/12/12 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
大学军训感言200字
2014/02/26 职场文书
爱的承诺书
2015/01/20 职场文书
中学生逃课检讨书
2015/02/17 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
2016年公司新年寄语
2015/08/17 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
pytorch MSELoss计算平均的实现方法
2021/05/12 Python