视差滚动（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. Java利用Preferences设置个人偏好

    Java利用Preferences设置个人偏好 Preferences的中文意思即偏好或喜好的意思,也就是说同一个程序在每次运行完后,可以通过Preferences来记录用户的偏好,下次启动时,程序会 ...

  2. Jmeter 小攻略（转）

    http://www.myexception.cn/open-source/1346307.html

  3. 近实时运算的利器---presto在公司实践

    1.起因 公司hadoop集群里的datanonde和tasktracker节点负载主要集中于晚上到凌晨,平日工作时间负载不是很高.但在工作时间内,公司业务人员有实时查询需求,现在主要 借助于hive ...

  4. 《DSP using MATLAB》示例Example4.15

    代码: b = [1/3, 1/3, 1/3]; a = [1, -0.95, 0.9025]; % x(n) y(n) coefficient [R, p, C] = residuez(b,a) M ...

  5. 20145223《Java程序程序设计》第2周学习总结

    20145223 <Java程序设计>第2周学习总结 教材学习内容总结 一: 1.基本的类型: (1)整数:short(2字节).int(4字节).long(8字节) (2)字节 byte ...

  6. jquery笔记（效果）

    显示/隐藏: $(selector).hide(speed, function()):隐藏 $(selector).show(speed, function()):隐藏 $(selector).tog ...

  7. 疯狂java学习笔记之面向对象(九) - 抽象和接口

    一.抽象(abstract): 1.抽象类: 使用abstract修饰的类就是抽象类; 相比于普通类抽象类增加了支持抽象方法的功能,但也丢失了创建实例的功能(抽象类中不能创建实例),其他普通类有的抽象 ...

  8. EBay .Net SDK Api 实践

        1.请求流程介绍   提供SOA地址:https://api.ebay.com/wsapi   WSDL生成的代码在WebService.cs文件当中.   ApiCall封装了所有的RPC, ...

  9. win dos命令行设置ip和dns

    首先以管理员身份运行cmd,保证之后在黑框中输入的命令都有管理员权限 C:\Windows\system32>netsh netsh>int netsh interface>ip n ...

  10. 编程思想┊从实例谈面向对象编程(OOP)、工厂模式和重构

    有了翅膀才能飞,欠缺灵活的代码就象冻坏了翅膀的鸟儿.不能飞翔,就少了几许灵动的气韵.我们需要给代码带去温暖的阳光,让僵冷的翅膀重新飞起来.结合实例,通过应用OOP.设计模式和重构,你会看到代码是怎样一 ...