使用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 position fixed固定居中问题解决方案
Aug 19 HTML / CSS
Css3新特性应用之视觉效果实例
Dec 12 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
HTML5的结构和语义(5):交互
Oct 17 HTML / CSS
基于HTML5 FileSystem API的使用介绍
Apr 24 HTML / CSS
html5 的a标签 Href 拨电话的写法
Nov 04 HTML / CSS
深入理解HTML的FormData对象
May 17 HTML / CSS
利用canvas实现图片压缩的示例代码
Jul 17 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 HTML / CSS
Bootstrap File Input文件上传组件
Dec 01 HTML / CSS
使用CSS实现小三角边框原理解析
Nov 07 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
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
jQuery的初始化与对象构建之浅析
2011/04/12 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
JS往数组中添加项性能分析
2015/02/25 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
python生成器的使用方法
2013/11/21 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
python 命令行传入参数实现解析
2019/08/30 Python
python实现根据文件格式分类
2019/10/31 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
python实现猜数游戏
2020/03/27 Python
python实现文法左递归的消除方法
2020/05/22 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
道路施工安全责任书
2014/07/24 职场文书
施工安全协议书范本
2014/09/26 职场文书
公司员工手册范本
2015/05/14 职场文书