视差滚动（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. Linux学习笔记(18) Shell编程之流程控制

    1. if语句 (1) 单分支if条件语句 格式为: # 注意条件判断式两端的空格if [ 条件判断式 ];then 程序员 fi 或者 if[ 条件判断式 ] then 程序 fi 例:判断分区使用 ...

  2. SQLServer 维护脚本分享（10）索引

    --可添加索引的字段 migs.user_seeks,migs.avg_total_user_cost,migs.avg_user_impact,migs.last_user_seek ,mid.st ...

  3. python装饰器--@property

    @property 考察 Student 类: class Student(object): def __init__(self, name, score): self.name = name sel ...

  4. poj 1141 区间dp+递归打印路径

    Brackets Sequence Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 30383   Accepted: 871 ...

  5. 使用J2SE API读取Properties文件的六种方法

    1.使用java.util.Properties类的load()方法示例: InputStream in = lnew BufferedInputStream(new FileInputStream( ...

  6. clear both

    原文地址:http://www.codefans.net/articles/653.shtml 因CSS很多布局是需要浮动的,当属性设置float(浮动)时,其所在的物理位置已经脱离文档流了,为了使f ...

  7. 解决ie8和ie7显示不一致

    解决ie8和ie7显示不一致 当使用 Microsoft Internet Explorer 8 Beta 1 版本时,可能会遇到以下问题之一: • 网页布局不整齐 • 文本或图像重叠 • JavaS ...

  8. ural 1071. Nikifor 2

    1071. Nikifor 2 Time limit: 1.0 secondMemory limit: 64 MB Nikifor has a number x. He doesn't need it ...

  9. django 模版语法及使用

    模版的定义 模版是一个文本,用语分离文档的表现形式和内容,通常用于生成html 模版当中能够使用的python语法非常少,for ,if 之类,还有ifequal,结束的时候也要写endifequal ...

  10. 流式大数据处理的三种框架：Storm，Spark和Samza

    许多分布式计算系统都可以实时或接近实时地处理大数据流.本文将对三种Apache框架分别进行简单介绍,然后尝试快速.高度概述其异同. Apache Storm 在Storm中,先要设计一个用于实时计算的 ...