0

这是分解...

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

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

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

Can anyone explain this, with a possible fix? I continually refer to the https://victoriabeckham.landrover.com/ site and can't figure out what they're doing differently to get theirs operating so efficiently.

4

3 回答 3

1

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

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

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

-肯

于 2012-07-25T15:12:32.740 回答
0

如果您仔细检查本网站，您将能够像陆虎网站一样使用它。

需要用到：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);

});
于 2012-07-25T15:09:52.793 回答
0

好的。所以我发现我的问题是在尝试对“top”属性上的“section-container”进行动画处理时。我使用“+=”来允许它从当前位置递增。使用“鼠标滚轮”事件时不是一个好主意。我将其更改为一个不断增加/减少的硬设置变量。

于 2012-07-25T20:33:18.453 回答