视差滚动效果

前几天，在网上看到视差滚动的网站，感觉特别帅，就尝试着自己仿照写了一部分，前几天已经发表过一篇关于滚动的文章，今天有简单的整理了一下

效果：
       

HTML代码

        <div class="para" data-source-url="images/1.jpg">
                <div class="content">
                    大家好久好久放贷款将快速返回结果决定飞机快睡觉时方可恢复就会对房价开始
            </div>
            <div class="screen" data-source-url="images/3.png"></div>
        </div>

JS代码

(function($){
        var $window=$(window);
        var windowHeight=$window.height();
        $window.resize(function(){                        //屏幕大小改变时，触发
                windowHeight=$window.height();
        });
        $.fn.parallax=function(options){
                var defaults={
                                xpos:"50%",
                                speedFactor:0.1
                        };
                if(options){
                        $.extend(defaults,options);
                }
                var $this=$(this);
                var getHeight;
                $this.each(function(index, element) {        //给每个元素添加背景以及样式
            image_url=$this.data("source-url");
                        $this.css({"backgroundImage":"url("+image_url+")","background-attachment":"fixed","backgroundRepeat":"no-repeat"});
        });
                update();       
                getHeight=function(jq){
                        return jq.outerHeight();        //获取元素的宽度
                }
                function update(){
                        var pos=$window.scrollTop();        //获取滚动条滚动的高度
                        $this.each(function(){
                                var $elem=$(this);
                                var top=$elem.offset().top;        //获取元素距离顶部的距离
                                $this.css("backgroundPosition",defaults.xpos+" "+Math.round((top-pos)*(defaults.speedFactor))+"px");//动态设置距离高度
                        });
                }
                $window.bind("scroll",update).resize(update);        //绑定滚动事件
        }
})(jQuery);


调用：

        $(".para").parallax({xpos:"50%",speedFactor:0.1});
        $(".para .screen").parallax({xpos:"50%",speedFactor:-0.5});