javascript - 视差 'background-image/position/attachment' jQuery 动画抖动

标签 javascript jquery css animation parallax

这是细目...

  • 包装器(position:relative;溢出:隐藏;)
    • 部分容器(position:absolute)
      • 多个子部分

我附加了一个鼠标滚轮事件监听器并为“section-container”的“顶部”位置设置动画(通过缓动)。随着这个位置的变化,每个部分的“背景位置”根据“部分容器”的“顶部”属性的位置垂直移动(通过 setTimeout() 不断更新)。

除了“背景位置”发生变化外,所有这些都正常工作,图像有点抖动。如果“背景附件”设置为“固定”,则不会发生这种情况...但我不希望这样。

任何人都可以通过可能的修复来解释这个吗?我不断地引用 https://victoriabeckham.landrover.com/网站,无法弄清楚他们做了什么不同的事情来让他们的网站如此高效地运作。

最佳答案

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

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

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

-肯

关于javascript - 视差 'background-image/position/attachment' jQuery 动画抖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11652746/

相关文章:

javascript - JavaScript 文件中的 URL 是相对于 JavaScript 位置还是浏览器?

javascript - 如何将我的 Solidity 合约定义为 javascript 对象?

Javascript OOP 类 - 将属性分配给函数

javascript - 使用 Jquery .click 显示/隐藏切换,适用于新用户,但不适用于种子

jquery - 幻灯片在 Gantry 中的位置是什么

javascript - jQuery Mobile -> 覆盖 jQuery UI Datepicker -> 布局损坏

css - 溢出显示在 css3 过渡中,如何 overflow hidden ?

javascript - jQuery addClass 单击并在再次单击时删除类

html - 如何在缩小屏幕尺寸时使页脚不可见?

javascript - 在angularjs ng-include中延迟包含html文件