我编写了一个类来为容器内或容器后的元素提供视差效果。
动画背后的主干是这个等式:
coords = (windowTopY - topYPositionOfTheCurrentElement) / speed) * direction
起初我认为这是滞后的,(windowTopY - topYPositionOfTheCurrentElement)
但它仍然滞后。
基本上我会尝试做的是在容器中移动图像,比它的内容慢。
示例: http: //lineabridge.v5.cloudsvr.com.au/和小提琴:http: //jsfiddle.net/SDmdM/1/
这是它自己的类:
$.fn.paralaxBackgroundImage = function(method, settings ){
settings = $.extend({
element : $('.paralaxImage'),
magnitude : 2,
direction : 1,
winTop : 0
}, settings);
var methods = {
start: function(currentElement) {
$(window).on('scroll.paralaxScroll', function() {
settings.winTop = $(this).scrollTop();
// Set the new coordinates on the current element
currentElement.css({
marginTop: ((settings.winTop - currentElement.closest('.paralax').position().top) / settings.magnitude) * settings.direction
});
});
},
stop : function() {
$(window).off('.paralaxScroll');
}
}
this.each(function() {
if ((method == 'start' || method === undefined)) {
methods.start($(this));
}
else if (method == 'stop') {
methods.stop($(this));
}
});
return this;
}