【转】视差滚动(Parallax Scrolling)效果的原理和实现

原文：http://www.cnblogs.com/JoannaQ/archive/2013/02/08/2909111.html

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

一、什么是视差滚动？

视差效果，原本是一个天文学术语，当我们观察星空时，离我们远的星星移动速度较慢，离我们近的星星移动速度则较快。当我们坐在车上向车窗外看时，也会有这样的感觉，远处的群山似乎没有在动，而近处的稻田却在飞速掠过。许多游戏中都使用视差效果来增加场景的立体感。说的简单点就是网页内的元素在滚动屏幕时发生的位置的变化，然而各个不同的元素位置变化的速度不同，导致网页内的元素有层次错落的错觉，这和我们人体的眼球效果很像。我看到多家产品商用视差滚动效果来展示产品，从不同的空间角度和用户体验，起到了非常不错的效果。

目前这种视差滚动效果被越来越多的国外网站所应用，成为网页设计的热点趋势。

通过一个很长的网页页面，其中利用一些令人惊叹的插图和图形，并使用视差滚动（Parallax Scrolling）效果，让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。完美的展示了一个复杂的过程，让你犹如置身其中。厌倦了千篇一律，呆板网页设计的你不放一试。

就是固定背景不让它随着滚动轴移动，但包含背景的容器是跟着滚动的，所造成的视觉差异看起来就像跟转换场景一样。

二、视差滚动效果的主要特点：

1、直观的设计，快速的响应速度，更合适运用于单页面

2、差异滚动分层视差
页面上很多的元素在相互独立地滚动着，如果我们来对其它分层的话，可以有两到三层：背景层，内容层，贴图层。

三、原理

通过前景与背景在场景移动时产生不同的视差，从而达到简单的立体效果

页面上很多的元素在相互独立地滚动着，如果我们来对其它分层的话，可以有两到三层：背景层，内容层，贴图层

　　差异滚动的实现规则：

　　背景层的滚动(最慢)
　　贴图层(内容层和背景层之间的元素)的滚动(次慢)
　　内容层的滚动(可以和页面的滚动速度一致)

　　我们让三个图层的滚动速度不一致，就做出了漂亮的差异滚动效果

1、运用大背景

　　这些背景图像一般是高分辨率，大图，覆盖整个网站。高清照片是一个迅速抓住观众的好方式，可以产生极具冲击力的视觉效果,用户的视线会不自觉地落在宽大的背景上

　　注意：

　　1. 1、背景图的色彩、内容在选择时要十分讲究，前提是不要破坏用户的体验，不然再漂亮的照片也是枉然。

　　图片类型最好选取趋向于一些比较柔和、略带透明的一类，不要影响到网站主体内容的阅读，识别，讲究协调。

　　1.2、以大量图片为特色的页面应该考虑图像的预加载问题，以便为用户提供更好更流畅的视觉体验.

2、你也可以用简单的配色方案

没有比纯色的背景更直观更简洁。纯色可以有很多种表达方式，一个视差区间内颜色最好保持使用2到3种，我们可以调整颜色的透明度，来达到各种视觉效果

3、定位好背景层，贴图层和内容层之间的关系

根据页面自身的功能来定义是否需要贴图层，贴图层的存在是为了更有效的传达视觉效果，但如果它成为了干扰，就会违背了我们使用的初衷

　　内容层的展现是最主要的，无论背景层和贴图层有多少花哨，在设计师设计过程中，内容层对用户的展示是最优先的

4、讲故事

　　有力的表现、简约的风格和设计的美感共同构成了一个出色地交互式叙事体验。我们经常听到这样的话：内容是王道，技术只是实现内容的一种工具。当你能够成功地把有力的信息和漂亮的执行力结合起来，你就能创造出人们喜欢并且享受其中的体验。　————Wieden+Kennedy

　　TWO 数据可视化——信息图形设计　故事1 传统水银体温计和大字母水银体温计　　

四、实现方法和工具

1、在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里的。

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

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

        <style>

            *{

                padding:0;

                margin:0

            }

            body{

                text-align:center;

                background-attachment:fixed;

            }

            #main{

                width: 1280px;

                margin:auto

            }

            .header{

                background:#fff;

                padding: 10px 0

            }

            .bg-attachment{

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

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

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

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

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

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

                background-attachment:fixed;

            }

            .bg-attachment .shadow{

                width:80%;

                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>

2、插件

Scrollorama

Javascript视差效果
Nike Better World场景的背后 一份为那些急切想重现NIKE网站滚动效果的设计师准备的教程。
用jQuery和CSS构建一个具有视差滚动效果的网站界面 一份为那些想在此领域了解的更深的设计师准备的例子和教程。
用JQuery创建一个时尚的具有视差背景的效果 一份教程，在背景上帮你添加一些滚动的云彩。
动画背景式的网页头部 用一个动画式的网页头部来让你的访问者为你欢呼吧！
视差滚动教程 一份视差效果和内容同时出现的有趣的教程。

四、超炫的视差滚动效果网站设计欣赏

GLP创意

divups

视差滚动(Parallax Scrolling)效果的原理和实现
视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 一.什么是视差滚 ...
视差滚动(Parallax Scrolling)插件补充
13. Windows Windows (github) 是一个让你用占据整个屏幕的section来构建单面网站的插件.该插件提供给你一些回调函数,当新的section出现在可视区并且并且处理快照时被 ...
jQuery视差滚动插件，（附原理分析，调用方法）
演示地址:http://www.jq22.com/jquery-info1799 jquery插件,使用验证过可用. 分析源代码后总结原理:设置background样式为fixed,判断浏览器滚动距离 ...
视差滚动（Parallax Scrolling）效果的原理与实现
视差滚动(Parallax Scrolling)效果的原理与实现1.视差滚动效果的主要特点: 1)直观的设计,快速的响应速度,更合适运用于单页面 2)差异滚动分层视差页面上很多的 ...
30个让人兴奋的视差滚动（Parallax Scrolling）效果网站--转
视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术.今天这篇文章就与大 ...
视差滚动（Parallax Scrolling）的一点小心得
下面内容来源于我知乎的这个答案:http://www.zhihu.com/question/20990029/answer/21436067 假期有空,整理到博客园这边,并做了一些语境的调整. ——— ...
那些H5用到的技术（5）——视差滚动效果
前言原理使用方式结合swiper.js 前言视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验. 目前最火热的视差开源库为pa ...
CSS完成视差滚动效果
一.是什么视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验我们可以把网页解刨成:背景层.内容层.悬浮层当滚动鼠标滑轮的时候 ...
利用background-attachment做视差滚动效果
视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 不明白的可以先看 ...

随机推荐

JavaScript省市联动菜单
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
Flux demo
Flux demo Introduction flux应用架构如下图所示,本文并不是讲述怎么立即做一个酷炫的应用,而是讲述如何依照这种框架,来进行代码的组织.我们先把这个流程转述为文字:抛开与webA ...
Linux内核导出符号宏定义EXPORT_SYMBOL源代码分析
资源: <include/linux/moudule.h> --. #ifndef MODULE_SYMBOL_PREFIX #define MODULE_SYMBOL_PREFIX &q ...
全网最全ASP.NET MVC 教程汇总
全网最全ASP.NET MVC 教程汇总 MVC架构已深得人心,微软也不甘落后,推出了Asp.net MVC.小编特意整理博客园乃至整个网络最具价值的MVC技术原创文章,为想要学习ASP.NET MV ...
C语言的这些事情有关内存
C语言的程序内存布局,从高到低依次为:栈区.堆区.未初始化数据区.初始化数据区.代码区. 一.栈区由编译器自己主动管理,无需程序猿手工控制.存放函数的參数值.局部变量的值等.栈区内容从高地址到低地址 ...
OpenWrt arp 命令发布
arp命令是用来查看mac与ip在消息路由器缓存表.这是一个基本的介绍了一下我就不说了. 但今天我的同事通过arp.可是在shell脚本就回显示没有此命令,我当时也感到非常费解. 于是乎.做了例如以下 ...
mysql 修改[取消]timestamp的自动更新
创建自动更新的 timestamp (插入或修改时 uptime都会自动更新) CREATE TABLE `hello` ( `id` int(11) NOT NULL, `uptime` times ...
讨论oracle在rowid和rownum
[ 概要 ] 刚刚接触oracle的同学可能经常会被rowid和rownum这两个词弄混, 弄清楚这两个家伙对于我们写sql会有非常大的帮助, 以下偶就抛砖引玉, 简单地谈谈他们之间的差别吧. [ 比 ...
照片详细解释YUV420数据格式
YUV格式有两大类:planar和packed. 对于planar的YUV格式.先连续存储全部像素点的Y.紧接着存储全部像素点的U.随后是全部像素点的V. 对于packed的YUV格式,每一个像素点的 ...
hdu 游乐场
Problem Description 小时候,因为家里经济困难,小明从未去过游乐场,所以直到现在,他还心存遗憾. 最近,杭州刚建了一座游乐场,为了弥补儿时的遗憾,小明带了一笔钱迫不及待地要去体 ...

【转】视差滚动(Parallax Scrolling)效果的原理和实现

curtain.js 类似于幕布升起的效果

随机推荐

热门专题