html视差效果,网页视差效果精品教程：具有视差效果的耐克鞋展示

// The plugin code

(function($){

$.fn.parallax = function(options){

var $$ = $(this);

offset = $$.offset();

var defaults = {

"start": 0,

"stop": offset.top + $$.height(),

"coeff": 0.95

};

var opts = $.extend(defaults, options);

return this.each(function(){

$(window).bind('scroll', function() {

windowTop = $(window).scrollTop();

if((windowTop >= opts.start) && (windowTop <= opts.stop)) {

newCoord = windowTop * opts.coeff;

$$.css({

"background-position": "0 "+ newCoord + "px"

});

}

});

});

};

})(jQuery);

// call the plugin

$('.section').parallax({ "coeff":-0.65 });

$('.section .inner').parallax({ "coeff":1.15 });

上面的这段js代码运行时需要三种参数：视差系数，运动的开始和结束位置。我们给scroll事件绑定了一个方法，这个方法会根据视差系数换算结果来更新背景图的位置。

非常简单，不是吗？