Stellar--视觉差滚动插件
插件下载地址：http://doc.bropaul.com/Stellar.js/
GitHub地址：https://github.com/markdalgleish/stellar.js
11个视觉差滚动效果的HTML5网站 ：http://www.w3cfuns.com/portal.php?mod=view&aid=714
介绍：
易用——最便捷的Parallax插件
只需给标签添加data属性，然后运行$.stellar()
就可以实现酷炫的视差滚动了。向右滚动页面，走起！精准——准确排列网页元素和背景
不论是网页元素还是背景，当到达屏幕边缘或者设定的偏移位置时，都能整齐排列。同时还能自动吸附到达指定位置
视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为今年网页设计的热点趋势，越来越多的网站应用了这项技术。
可以看一下演示效果：http://www.ok-studios.de/home/
一、什么是视差滚动？
视差效果，原本是一个天文学术语，当我们观察星空时，离我们远的星星移动速度较慢，离我们近的星星移动速度则较快。当我们坐在车上向车窗外 看时，也会有这样的感觉，远处的群山似乎没有在动，而近处的稻田却在飞速掠过。许多游戏中都使用视差效果来增加场景的立体感。说的简单点就是网页内的元素在滚动屏幕时发生的位置的变化，然而各个不同的元素位置变化的速度不同，导致网页内的元素有层次错落的错觉，这和我们人体的眼球效果很像。我看到多家产品商用视差滚动效果来展示产品，从不同的空间角度和用户体验，起到了非常不错的效果。
目前这种视差滚动效果被越来越多的国外网站所应用， 成为网页设计的热点趋势。
通过一个很长的网页页面，其中利用一些令人惊叹的插图和图形，并使用视差滚动（Parallax Scrolling）效果，让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。完美的展示了一个复杂的过程，让你犹如置身其中。厌倦了千篇一律，呆板网页设计的你不放一试。
就是固定背景不让它随着滚动轴移动，但包含背景的容器是跟着滚动的，所造成的视觉差异看起来就像跟转换场景一样。
二、视差滚动效果的主要特点：
1、直观的设计，快速的响应速度，更合适运用于单页面
2、差异滚动 分层视差
页面上很多的元素在相互独立地滚动着，如果我们来对其它分层的话，可以有两到三层 ：背景层，内容层，贴图层。
三、原理
通过前景与背景在场景移动时产生不同的视差，从而达到简单的立体效果
页面上很多的元素在相互独立地滚动着，如果我们来对其它分层的话，可以有两到三层 ：背景层，内容层，贴图层
1、运用大背景
这些背景图像一般是高分辨率，大图，覆盖整个网站。高清照片是一个迅速抓住观众的好方式，可以产生极具冲击力的视觉效果,用户的视线会不自觉地落在宽大的背景上
注意：
1. 1、背景图的色彩、内容在选择时要十分讲究，前提是不要破坏用户的体验，不然再漂亮的照片也是枉然。
图片类型最好选取趋向于一些比较柔和、略带透明的一类，不要影响到网站主体内容的阅读，识别，讲究协调。
1.2、以大量图片为特色的页面应该考虑图像的预加载问题，以便为用户提供更好更流畅的视觉体验.
2、你也可以用简单的配色方案
没有比纯色的背景更直观更简洁。纯色可以有很多种表达方式，一个视差区间内颜色最好保持使用2到3种，我们可以调整颜色的透明度，来达到各种视觉效果
3、定位好背景层，贴图层和内容层之间的关系
根据页面自身的功能来定义是否需要贴图层，贴图层的存在是为了更有效的传达视觉效果，但如果它成为了干扰，就会违背了我们使用的初衷
内容层的展现是最主要的，无论背景层和贴图层有多少花哨，在设计师设计过程中，内容层对用户的展示是最优先的
4、讲故事
有力的表现、简约的风格和设计的美感共同构成了一个出色地交互式叙事体验。我们经常听到这样的话：内容是王道，技术只是实现内容的一种工具。当你能够成功地把有力的信息和漂亮的执行力结合起来，你就能创造出人们喜欢并且享受其中的体验。 ————Wieden+Kennedy
插件有：
1 Scrollorama
2 curtain.js
3 jQuery-Parallax
4 stellar.js
5 jparallax
6 Skrollr
7 Parallax.js
教程
Javascript视差效果
提供一个实现的源码：（http://adamed.iteye.com/blog/1579555）
jQuery ( function( $ ) {
$.Body = $ ( 'body' );// body对象封装
$.Window = $ ( window );// window对象封装
// 根据浏览器类型获取一个html或body对象，具体作用在下面。
$.Scroll = ( $.browser.mozilla || $.browser.msie ) ? $ ( 'html' ) : $.Body;
/*
* 具有data-controller属性的对象（也就是页面中：
* 与最后一个section
// 根据源码剖析，此方法未做任何操作
$ ( '[data-controller]' ).Instantiate ( );
/*
* 该对象供easing插件使用 http://jqueryui.com/demos/effect/easing.html
*/
var _opt = {
duration : 1200,// 时间
easing : "easeInOutExpo"
};
/*
* 当前纵向滚动条距离页面顶部距离 例如：6378
*/
console.log ( $.Scroll.scrollTop ( ) );
/*
* 根据绝对计算当前处于第几个场景 例如：5.815
*/
console.log ( ( $.Scroll.scrollTop ( ) + 600 ) / 1200 );
/*
* 场景数 例如：5
*/
$current = Math.floor ( ( $.Scroll.scrollTop ( ) + 600 ) / 1200 );
console.log ( "场景数:" + $current );
console.log ( "窗口高度:" + $.Window.height ( ) );
var $newY = $current * 1200 - ( $.Window.height ( ) - 1200 ) / 2;
console.log ( "new Y：" + $newY );
//**********这个地方实现了刷新时自动回到当前场景初始状态***********
$.Scroll.animate ( {
scrollTop : $newY
} , _opt );
$first = $ ( "#story-welcome" );
$first.show ( "slow" );
} ); 提供一个 我自己利用stellar实现的视觉差滚动的页面
`
`
<html>
<head>
<title>Stellar.js Backgrounds Demotitle>
<style type="text/css">
body,span,div,{
margin: 0;
padding: 0;
}
body {
font-family: helvetica,arial;
}
.photo {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 700px;
position: relative;
}
.photo span {
bottom: 0;
display: block;
color:white;
font-size: 38px;
left: 50%;
margin-left: -640px;
padding: 10px;
position: absolute;
text-shadow: 0 2px 0 black, 0 0 10px black;
width: 1280px;
}
.summer {
background-image: url("images/summer.jpg");
}
.autumn {
background-image: url("images/autumn.jpg");
}
.winter {
background-image: url("images/winter.jpg");
}
.spring {
background-image: url("images/spring.jpg");
}
style>
<script src="js/jquery-2.1.1.js">script>
<script src="js/jquery.stellar.js">script>
<script type="text/javascript">
$(function(){
$.stellar({
horizontalScrolling: false,
verticalOffset: 40
});
});
script>
head>
<body>
<div class="photo summer" style="background-position: 50% 0px;" data-stellar-background-ratio="0.5" >
<span>Summerspan>
div>
<div class="photo autumn" style="background-position: 50% 0px;" data-stellar-background-ratio="0.5" >
<span>Autumnspan>
div>
<div class="photo winter" style="background-position: 50% 0px;" data-stellar-background-ratio="0.5" >
<span>Winterspan>
div>
<div class="photo spring" style="background-position: 50% 0px;" data-stellar-background-ratio="0.5" >
<span>Springspan>
div>
<div class="photo summer" style="background-position: 50% 0px;" data-stellar-background-ratio="0.5" >
<span>Summerspan>
div>
<div class="photo autumn" style="background-position: 50% 0px;" data-stellar-background-ratio="0.2" >
<span>Autumnspan>
div>
<div class="photo winter" style="background-position: 50% 0px;" data-stellar-background-ratio="0.2" >
<span>Winterspan>
div>
<div class="photo spring" style="background-position: 50% 0px;" data-stellar-background-ratio="0.2" >
<span>Springspan>
div>
body>
html>