视差滚动（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. JVM内存配置详解

    前段时间在一个项目的性能测试中又发生了一次OOM(Out of swap sapce),情形和以前网店版的那次差不多,比上次更奇怪的是,此次搞了几天之后啥都没调整系统就自动好了,死活没法再重现之前的O ...

  2. lr_save_string 和 sprintf 的使用

    lr_save_string 和 sprintf 的使用 一.lr_save_string 使用介绍1.该函数主要是将程序中的常量或变量保存为lr中的参数.格式: //将常量保存为参数 lr_save ...

  3. SU suvelan命令学习

  4. ios 简单的倒计时验证码数秒过程实现

    timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(timerFireMethod:) ...

  5. 归并排序（Merge Sort）

    归并排序是建立在归并操作上的一种有效的排序算法,该算法是采用分治法(Divide and Conquer)的一个非常典型的应用.将已有序的子序列合并,得到完全有序的序列:即先使每个子序列有序,再使子序 ...

  6. HTML5学习之路

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

  7. HDU4307 Matrix（最小割）

    题目 Source http://acm.hdu.edu.cn/showproblem.php?pid=4307 Description Let A be a 1*N matrix, and each ...

  8. Hadoop学习笔记（1）

    Doug Cutting Lucene(索引引擎)---Nutch(搜索Data抓取)---Hadoop 1997:Lucene 2003:GFS 2004:NDFS\MapReduce\Nutch ...

  9. mybatis 查询缓存问题

    <settings> <setting name="localCacheScope" value="STATEMENT" /> < ...

  10. Haskell 笔记 ②

    ①如何写一个求阶层函数? fac 0 =1 fac n=n*fac(n-1) 函数自适应匹配参数,可以把特判情况写在前面,注意按顺序匹配的,n这种万能情况写在最前面就完蛋了.同时你也注意到,函数只能一 ...