视差滚动（Parallax Scrolling）效果的原理与实现
1.视差滚动效果的主要特点：
1)直观的设计，快速的响应速度，更合适运用于单页面
2)差异滚动 分层视差
页面上很多的元素在相互独立地滚动着，如果我们来对其它分层的话，可以有两到三层 ：背景层，内容层，贴图层。
2.原理
1)差异滚动的实现规则：
背景层的滚动(最慢)
贴图层(内容层和背景层之间的元素)的滚动(次慢)
内容层的滚动(可以和页面的滚动速度一致)
2)1、运用大背景
这些背景图像一般是高分辨率，大图，覆盖整个网站。高清照片是一个迅速抓住观众的好方式，可以产生极具冲击力的视觉效果,用户的视线会不自觉地落在宽大的背景上
注意：
1.1、背景图的色彩、内容在选择时要十分讲究，前提是不要破坏用户的体验，不然再漂亮的照片也是枉然。
图片类型最好选取趋向于一些比较柔和、略带透明的一类，不要影响到网站主体内容的阅读，识别，讲究协调。
1.2、以大量图片为特色的页面应该考虑图像的预加载问题，以便为用户提供更好更流畅的视觉体验.
2、你也可以用简单的配色方案
没有比纯色的背景更直观更简洁。纯色可以有很多种表达方式，一个视差区间内颜色最好保持使用2到3种，我们可以调整颜色的透明度，来达到各种视觉效果
3、定位好背景层，贴图层和内容层之间的关系
根据页面自身的功能来定义是否需要贴图层，贴图层的存在是为了更有效的传达视觉效果，但如果它成为了干扰，就会违背了我们使用的初衷
内容层的展现是最主要的，无论背景层和贴图层有多少花哨，在设计师设计过程中，内容层对用户的展示是最优先的
4、讲故事
有力的表现、简约的风格和设计的美感共同构成了一个出色地交互式叙事体验。我们经常听到这样的话：内容是王道，技术只是实现内容的一种工具。当 你能够成功地把有力的信息和漂亮的执行力结合起来，你就能创造出人们喜欢并且享受其中的体验。
3.实现方法
1、在CSS中定义背景滚动方式的属性是backgroud-attacthment
background-attachment -- 定义背景图片随滚动轴的移动方式
取值: scroll | fixed | inherit
scroll: 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed: 当页面的其余部分滚动时，背景图像不会移动。
inherit: 规定应该从父元素继承 background-attachment 属性的设置。
初始值: scroll
继承性: 否
适用于: 所有元素
2、js实现，添加一些动画事件，移动的速度、方向不同
4.使用场景
1、初创网站。如果其目的在于宣传品牌、产品，且无太多文本内容呈现时，可在初期上线视差滚动网站，让人先对其产生兴趣，留下印象。之后随着访客增多，内容完善后，再改回常规网站形式。
2、主题宣传站点。对于需要在某个时间段发布的活动宣传页面，需要尽可能为用户产生视觉上的冲击，可上线视差滚动站点。例如阿里、腾讯很多专题网站。
3、特殊行业站点。这类站点的特色也在于“宣传为主、突出视觉冲击力、内容有限”。如一些设计公司网站、游戏公司网
效果
插件代码
(function($){
var methods={
init:function(options){
var settings={
offset:true,
bgfixed:true,
insert:true
}
return this.each(function(){
if(options){
$.extend(settings,options);
}
var $this=$(this),
windowSelector = $(window),
documentSelector=$(document),
thisHeight=0,
thisOffsetTop,
image_url='';
_constructor();
function _constructor(){
image_url=$this.data("source-url");
$this.css({"background-image":"url("+image_url+")"});
if(settings.bgfixed){
$this.css({"background-attachment":"fixed"});
}
addEventsFunction();
}
function addEventsFunction(){
windowSelector.on("scroll",function(){
if(settings.offset){
parallaxEffect();
}
}).trigger("scroll");
}
function parallaxEffect(){
var documentScrollTop,
startScrollTop,
endScrollTop,
visibleScrollValue;
thisHeight=$this.outerHeight(); //800px
windowHeight=windowSelector.height(); //窗口的可见高度
thisOffsetTop=$this.offset().top; //0px,
documentScrollTop=documentSelector.scrollTop(); //滚动条滚动的高度
startScrollTop=documentScrollTop + windowHeight;// 滚动条滚动的高度 + 窗口的可见高度
endScrollTop=documentScrollTop - thisHeight; // 滚动条滚动的高度 - 800px
if((startScrollTop > thisOffsetTop) && (endScrollTop < thisOffsetTop)){
visibleScrollValue = startScrollTop - endScrollTop; //定值，窗口的可见高度+800px
pixelScrolled = documentScrollTop - (thisOffsetTop - windowHeight); //滚动条滚动的高度 - 窗口的可见高度
percentScrolled = pixelScrolled / visibleScrollValue;
if(settings.invert){
deltaTopScrollVal = percentScrolled *100; //向下滚动
$this.css({"background-position":"50% "+deltaTopScrollVal+"%"});
}else{
deltaTopScrollVal = (1-percentScrolled) *100; //向上滚动
$this.css({"background-position":"50% "+deltaTopScrollVal+"%"});
}
}
}
});
},
destory:function(){},
reposition:function(){},
update:function(content){}
};
$.fn.cherryFixedParallax=function(method){
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method with name ' + method + ' is not exist for jQuery.cherryMediaParallax' );
}
}
})(jQuery);