作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在研究视差功能,它在除 safari 之外的所有浏览器上都能正常工作。
我一直在关注 this article看看我可能做错了什么,我想我写错了我的 javascript,因为我直接绑定(bind)到滚动事件。
这可能是一个愚蠢的问题,但我应该如何在不绑定(bind)到滚动事件的情况下开始我的视差滚动事件。我希望图像在用户滚动时以不同的速度朝不同的方向移动。
我的 JS
function 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 上跳动?
最佳答案
首先,从 Underscore 添加这个去抖功能
// 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);
}
}
关于javascript - Safari ios 中的视差滚动跳动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25335829/
我正在尝试通过在 View 加载后来回更改 alpha 级别来使其中包含图像的 uibutton 缓慢脉动... 目前我正在这样做,但它什么也没做...... -(void)loopdyloop {
我在使用 UITableView 时遇到了这个问题,tableView 的 cells 高度不同,自动布局约束设置不当。当您向下滚动到 tableView 的底部并加载更多数据(无论使用 reload
我是一名优秀的程序员,十分优秀!