视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为今年网页设计的热点趋势，越来越多的网站应用了这项技术。

不明白的可以先看看eBay上的效果：http://www.ebay.com/new/

其实就是固定背景不让它随着滚动轴移动，但包含背景的容器是跟着滚动的，所造成的视觉差异看起来就像跟转换场景一样。（这个解释别嫌混乱…）

在CSS中定义背景滚动方式的属性是backgroud-attacthment

background-attachment -- 定义背景图片随滚动轴的移动方式

  • 取值: scroll | fixed | inherit

    • scroll: 默认值。背景图像会随着页面其余部分的滚动而移动。
    • fixed: 当页面的其余部分滚动时，背景图像不会移动。
    • inherit: 规定应该从父元素继承 background-attachment 属性的设置。
    • 初始值: scroll
    • 继承性: 否
    • 适用于: 所有元素

附带w3c的链接：http://www.w3school.com.cn/css/pr_background-attachment.asp

浏览器的支持性：

测试了chrome,opera,safari,firefox,ie7-8都是可以的，所以就是说IE6下不行~

在IE6下使用这个属性，需要把background-attachment:fixed放置于body或html当中，就是说你说在其它标签里面是没用。上面的w3c里可以看得到效果就是因为它是放在body里的。

这是我自己做的一个demo，点击可以下载

代码：

 <!doctype html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>滚动视觉差示例</title>

         <style>

             *{

                 padding:;

                 margin:

             }

             body{

                 text-align:center;

                 background-attachment:fixed;

             }

             #main{

                 width: 1280px;

                 margin:auto

             }

             .header{

                 background:#fff;

                 padding: 10px

             }

             .bg-attachment{

                 background:url(.jpg) center center no-repeat;

                 box-shadow: 7px 18px # inset, -7px 18px # inset;

                 -webkit-box-shadow: 7px 18px # inset, -7px 18px # inset;

                 -moz-box-shadow:  7px 18px # inset, -7px 18px # inset;

                 -o-box-shadow:  7px 18px # inset, -7px 18px # inset;

                 -ms-box-shadow:  7px 18px # inset, -7px 18px # inset;

                 background-attachment:fixed;

             }

             .bg-attachment .shadow{

                 width:%;

                 height:700px;

                 overflow:hidden;

                 margin:auto;

             }

             .div2{

                 background:url(qingz.jpg) center center no-repeat;

                 background-attachment:fixed;

             }

         </style>

     </head>

     <body>

         <div id="main">

             <div class="header">

                 <img src="5.jpg">

             </div>

             <div class="bg-attachment">

                 <div class="shadow"></div>

             </div>

             <div class="header">

                 <img src="qi.jpg">

             </div>

             <div class="bg-attachment div2">

                 <div class="shadow"></div>

             </div>

         </div>

     </body>

 </html>

利用background-attachment做视差滚动效果的更多相关文章

  1. 使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台

    www.gbtags.com 使用javascript开发的视差滚动效果的云彩 阅读全文:使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台

  2. 16个最棒的jQuery视差滚动效果教程

    今天我们整理了16个最棒的jQuery视差滚动效果教程 , 并附有演示地址,你可以快速的查看教程的效果,或者应用在自己的项目中.希望本文对想要学习或者使用jQuery视差效果的朋友有帮助,慢慢的欣赏吧 ...

  3. css实现视差滚动效果

    今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思,于是就做了一个,demo链接http://1.liwenyang.applinzi.com/index.html 大多数的视差滚动效果都是使 ...

  4. [Swift通天遁地]九、拔剑吧-(14)创建更美观的景深视差滚动效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  5. 分享七款视差滚动效果的jQuery 插件

    视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是”改变”.在网页设计中,视差滚动(Parallax Scr ...

  6. 使用javascript开发的视差滚动效果的云彩

    在线演示 jquery.parallax.js是一款能够帮助你快速开发视差效果的jQuery插件,在这里我们使用它来开发一款漂亮的云朵视差效果. 主要代码: Javascript ........ 阅 ...

  7. [Swift通天遁地]九、拔剑吧-(13)创建页面的景深视差滚动效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  8. 那些H5用到的技术（5）——视差滚动效果

    前言原理使用方式结合swiper.js 前言 视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验. 目前最火热的视差开源库为pa ...

  9. CSS完成视差滚动效果

    一.是什么 视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验 我们可以把网页解刨成:背景层.内容层.悬浮层 当滚动鼠标滑轮的时候 ...

随机推荐

  1. ExpandableListView 里面嵌套GridView实现高度自适应

    很早之前做过一个商城的app 也是第一次做安卓. 实现的效果如下: 因为一开始做安卓,很多写的代码都不规范,在下面上代码的地方,还请高手指点(勿喷,楼主是自尊心很强的屌丝) 这个效果要解决2个大问题, ...

  2. error: bad symbolic reference. A signature in HiveContext.class refers to term hive

    在spark-shell中执行val sqlContext = new org.apache.spark.sql.hive.HiveContext(sc)报错: error: bad symbolic ...

  3. js简版图片左右切换功能

    function leftMove(obj,direction,lis){ var num = 0; var liWidth = lis[0].offsetWidth; setInterval(fun ...

  4. HTML5拖放事件（Drag-and-Drop,DnD）

    拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 拖放是在“拖放源(drag source)”和“拖放目标(drop target ...

  5. js 数组(Array)

    一.数组 稠密数组(非稀疏数组) 稀疏数组 二.数组的添加和删除 我们已经常见过添加数组元素最简单的方法:为新索引赋值;也可以使用push()方法在数组末尾增加一个或者多个元素: a = []; a. ...

  6. 由case 和 break 引发的思考

    我在使用case 语句的时候,发现结果不对劲,原来我是忽略了break这个语句的添加 然后,我要反思的是,这样基本的语句,我这样的错误也能犯,证明我自己之前还没有真正掌握这个语句的使用. 所以,真正地 ...

  7. CF# Educational Codeforces Round 3 F. Frogs and mosquitoes

    F. Frogs and mosquitoes time limit per test 2 seconds memory limit per test 512 megabytes input stan ...

  8. BZOJ2158 : Crash 的旅行计划

    A类数据: $n,q\leq1000$ 修改:$O(1)$直接改 查询:$O(n)$BFS B类数据: $n,q\leq100000$,保证是一条链 用线段树维护区间最大前缀.后缀和 修改:$O(\l ...

  9. CSS样式覆盖顺序

    有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题,如下 Css代码   #navigator { height: 100%; width: 200; position:  ...

  10. viewpager 与 radiogroup 联动时的位置问题

    public void onPageSelected(int position) {} 方法中得到radiobutton时,最好通过(RadioButton) this.radioGroup.find ...