视差'背景图像/位置/附件'jQuery的动画很不稳定

Parallax 'background-image/position/attachment' jQuery animation is jittery

本文关键字：动画 不稳定 jQuery 附件 背景 图像 视差 位置      更新时间：2024-03-11

以下是细分。。。

  • 包装器（位置：相对；溢出：隐藏；）
    • 截面容器（位置：绝对）
      • 多个子部分

我附加了一个鼠标滚轮事件侦听器，并对"section container"的"top"位置进行动画处理（轻松处理）。随着此位置的变化，每个节的"背景位置"会根据"节容器"的"顶部"属性的位置垂直移动（通过setTimeout（）不断更新）。

所有这些都正常工作，除了"背景位置"发生变化，图像会有点抖动。如果"后台附件"设置为"已修复"，则不会发生这种情况。。。但我不想那样。

有人能解释一下吗？我经常提到https://victoriabeckham.landrover.com/网站，无法弄清楚他们正在做什么不同的事情来让他们的运营如此高效。

你可以看看这一点，我相信这是他们制作大部分动画的地方：https://victoriabeckham.landrover.com/js/ScrollAnimator.js?v=471

我不得不说，他们有某种框架可以用来实现这一点。

编辑：很抱歉没有看到我上面的新答案，这似乎是一个很好的起点。

-Ken

如果你仔细检查这个网站，你将能够像使用landrover网站一样使用它。

您需要使用：scrollTo插件和视差插件

文档jQuery应该是这样的：

$(document).ready(function(){
    $('#nav').localScroll(800);
    //.parallax(xPosition, speedFactor, outerHeight) options:
    //xPosition - Horizontal position of the element
    //inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
    //outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
    $('#intro').parallax("50%", 0.1);
    $('#second').parallax("50%", 0.1);
    $('.bg').parallax("50%", 0.4);
    $('#third').parallax("50%", 0.3);
});

好的。所以我发现我的问题是在尝试对"top"属性上的"section container"设置动画（）时。我使用了一个"+="来允许它从当前位置递增。使用"mousewheel"事件时不是一个好主意。我把它改成了一个不断递增/递减的硬集变量。

相关文章：