Question

这是故障......

包装器（位置：相对;溢出：隐藏;）
- section-container（position：absolute）
  - 多个子部分

我附加了一个鼠标滚轮事件监听器和动画（缓动）'section-container'的'top'位置。随着此位置的变化，每个部分的“背景位置”将根据“section-container”的“top”属性的位置垂直移动（通过setTimeout（）不断更新）。

所有这一切都能正常工作，除非“背景位置”发生变化，否则图像会有一点抖动。如果'background-attachment'设置为'fixed'，则不会发生这种情况......但我不希望这样。

任何人都可以通过可能的解决办法解释这一点吗？我不断提到https://victoriabeckham.landrover.com/网站，无法弄清楚他们做了哪些不同的事情，以使他们的运作如此有效。

Answer 1

你可以看一下，我相信它们在大多数动画制作的地方： https://victoriabeckham.landrover.com/js/ScrollAnimator.js?v=471

我不得不说他们有一些他们用来实现这个目标的框架。

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

-Ken

Answer 2

如果仔细检查this website，您就可以像使用陆地网站一样使用它。

您需要使用：scrollTo plugin和parallax plugin

文档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);

});

Answer 3

确定。所以我发现我的问题是在尝试动画（）'top'属性上的'section-container'时。我使用“+ =”来允许它从当前位置增加。使用'mousewheel'事件时不是一个好主意。我把它改成了一个连续增加/减少的硬件变量。

视差＆＃39;背景图像/位置/附件＆＃39; jQuery动画是紧张不安的

3 个答案: