视差滚动（Parallax Scrolling）效果的原理与实现

视差滚动（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);