视差滚动（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. IM服务器的架构

    一. 总的构架结构示意图: 如上图所示,目前系统总的分成六个模块, 分别为网络/协议解析模块,用户帐号管理模块,消息处理模块,动作处理模块,数据均衡处理模块,客户状态处理模块 . 正常流程应该这么实现 ...

  2. 如何hash一条有向边

    之前这个问题还困扰了我好久,但是现在我才明白这个很蠢的问题 那就是(3,7)(4,9)(3,3)这种有向序点对(括号可能用的不对) 我们可以变成对"(3,7)"字符串的hash,当 ...

  3. LoadRunner 一些快捷键

    F4   Runtime Setting F5   运行 Ctrl Alt C  注释 Ctrl Alt U  取消注释 Tab  缩进 Shift Tab  取消缩进 Ctrl L  打开参数管理对 ...

  4. TortoiseSVN菜单项功能说明

    TortoiseSVN是windows下其中一个非常优秀的SVN客户端工具.通过使用它,我们可以可视化的管理我们的版本库.不过由于它只是一个客户端,所以它不能对版本库进行权限管理. TortoiseS ...

  5. JMeter中的关联-正则表达式提取(2)

    JMeter获取正则表达式中的提取的所有关联值的解决方法: 需求如下: { : ", : "results": : [ : : { : : : "total_e ...

  6. C语言补码作用

    补码主要是为了cpu运算器在进行减法运算时避免借位而设立的. 在早期,cpu中的运算器部分,只要实现一个加法器就可以完成四由算术运算. 因为计算机中的数值编码是有限位数的,所以减法实际上相当于加上减数 ...

  7. 登录时的"记住我"

    当我们在做各个系统的登录界面时,喜欢在加上一个功能就是“记住我”, 我用js来实现一下看看 function SetCookie(name, value, expires, path, domain, ...

  8. ajax乱码

    ajax提交请求,参数在data上依然乱码,并且已经做了过滤转码, 其他请求没有问题,此请求有问题建议使用下述方式处理: 前端:encodeURIComponent(fileName)或者encode ...

  9. 我认为我可以去尝试做一下Maya Ue4导出插件

    Begin Map Begin Level Begin Actor class="StaticMeshActor" Name=Floor Archetype=StaticMeshA ...

  10. HTML5学习之路

    出于公司项目需求,我现在开始学习html5,虽然零零散散有过一点,比如说新出的语义化标签,本地存储之类的,但是从来都没有系统的去了解.