我正在研究视差功能,它在所有浏览器上都工作得很好,除了safari。
我一直在遵循这篇文章,看看我可能做错了什么,我认为我已经写错了我的javascript,因为我直接绑定到滚动事件。
这可能是一个愚蠢的问题,但我应该如何开始我的视差滚动事件而不绑定到滚动事件。我希望图像在用户滚动时以不同的速度向不同的方向移动。
我JSfunction onScroll() {
window.requestAnimationFrame(parallax);
function parallax(){
var prlx_effect_1= +(window.pageYOffset *.55).toFixed(2); // .55 for slow | .7 good for fast
var prlx_str_1 = "translate3d(0, "+prlx_effect_1+"px, 0)";
jQ('.prlx-1').css({
"transform":prlx_str_1,
"-ms-transform":prlx_str_1,
"-webkit-transform":prlx_str_1
});
var prlx_effect_2= -(window.pageYOffset *.25 ).toFixed(2); // .2 for slow | .4 good for fast
var prlx_str_2 = "translate3d(0, "+prlx_effect_2+"px, 0)";
jQ('.prlx-2').css({
"transform":prlx_str_2,
"-ms-transform":prlx_str_2,
"-webkit-transform":prlx_str_2
});
window.requestAnimationFrame(parallax);
}
}
window.addEventListener("scroll", onScroll, false);
有什么建议吗?还是有其他原因导致视差只在safari上跳动?
首先,从下划线
添加这个debounce函数// debounce is taken from _underscore.js
function debounce(func, wait, immediate) {
var timeout, args, context, timestamp, result;
return function() {
context = this;
args = arguments;
timestamp = new Date();
var later = function() {
var last = (new Date()) - timestamp;
if (last < wait) {
timeout = setTimeout(later, wait - last);
} else {
timeout = null;
if (!immediate) result = func.apply(context, args);
}
};
var callNow = immediate && !timeout;
if (!timeout) {
timeout = setTimeout(later, wait);
}
if (callNow) result = func.apply(context, args);
return result;
};
}
在用户开始滚动时启动requestAnimationFrame循环,并在最后一个滚动事件发生100毫秒后使用标志终止它。
var requesting = false;
var killRequesting = debounce(function () {
requesting = false;
}, 100);
function onScroll() {
if (!requesting) {
requesting = true;
requestAnimationFrame(parallax);
}
killRequesting();
}
现在在你的视差函数中检查标志,然后再调用它自己。
function parallax() {
// your parallax code
if (requesting) {
requestAnimationFrame(parallax);
}
}
第二,你应该总是缓存你的jQuery选择器。
var $prlx1 = jQ('.prlx-1');
var $prlx2 = jQ('.prlx-2');
function parallax(){
var prlx_effect_1= +(window.pageYOffset *.55).toFixed(2); // .55 for slow | .7 good for fast
var prlx_str_1 = "translate3d(0, "+prlx_effect_1+"px, 0)";
$prlx1.css({
"transform":prlx_str_1,
"-ms-transform":prlx_str_1,
"-webkit-transform":prlx_str_1
});
var prlx_effect_2= -(window.pageYOffset *.25 ).toFixed(2); // .2 for slow | .4 good for fast
var prlx_str_2 = "translate3d(0, "+prlx_effect_2+"px, 0)";
$prlx2.css({
"transform":prlx_str_2,
"-ms-transform":prlx_str_2,
"-webkit-transform":prlx_str_2
});
if (requesting) {
window.requestAnimationFrame(parallax);
}
}