滚动视觉差效果

html:

<div class="box"></div>

css：
.box{height:500px;background-repeat:no-repeat;background-attachment:fixed;background-position:center 0;background-size: cover;margin-top:500px;}

jq:
/*滚动视觉差效果*/

$.fn.viewDiff=function(options){
    //定义默认的风格（不传入参数情况下）
    var defaults={
        speed:.2
    };
    //定义合并后的风格（传入的参数和默认的合并后）
    var settings= $.extend({},defaults,options),
        _this = $(this);
    $(window).scroll(function(){
        offsetT = _this.offset().top*settings.speed;
        _this.css('backgroundPosition','50% '+offsetT+'px');
        let scroll = $(window).scrollTop(),
            imgTop = offsetT-scroll*settings.speed;
        _this.css('backgroundPosition','50% '+imgTop+'px');
    })
}

$('.box').viewDiff({
    speed:.2
});