Question

我正在开发一个单页网站，我正在尝试在滚动上制作动态背景动画。假设我的网站有4个不同的部分。对于每个不同的部分，我有不同的背景。

使用jQuery，我能够检索正在使用的滚动的百分比。所以，让我们说我的每个部分都是25％的间隔（不完全正确，但这仅仅是为了描绘我想要达到的目标......）。所以背景为0-25％，背景B为25-50％，背景为50-75％，背景为50％，背景为D.

背景相似，但它们在网站的每一侧反弹，类似于乒乓球。图标也会改变，例如我的第一个背景可能是左侧100px×100px的House图像，而第二个背景可能是右侧的放大镜图像，仍然是100px×100px。

现在，我想做的是在背景之间产生某种“流动性”，所以看起来好像backgroundA正在逐渐转变为backgroundB。

我在某些网站上看到过这种行为，所以我很确定它有可能......但是，不太确定该怎么做。

如果您需要进一步澄清，请与我们联系。

谢谢！：）

Answer 1

捕获滚动事件，然后根据它转换任何元素：

$(window).scroll(function(){
    var doc_h = $('body').height()-window.innerHeight;
    var scroll_y = window.scrollY;
    var sc_p = scroll_y/doc_h;

    $('#some-element').css({'bottom':50+sc_p*20+'px'});
});

实际函数取决于你真正想做的事情，但基本上只需要计算滚动条的位置然后改变一些元素的属性。

示例中的功能区只是一组4个div，宽度= 0，当页面滚动时会增长，最后一个div随高度增长。你只需捕获

Answer 2

通过给你的OP给出的例子，你可能正在寻找的方法是略微垂直地重叠背景图像（线条似乎相互缠绕），并且基于scrollTop位置，“step”函数是在每个背景上触发动画宽度（检查名为bg.js的页面上的脚本）。在每个“步骤”中，这些函数根据一些数学公式改变背景图像的宽度 - 类似于（scrollTop *（heightCurrentBg - currentWidth）。所有这些都在前端，使它看起来好像是一个流体线来回移动/反弹。

编辑 - 至于使用滚动位置与页面上的元素进行交互，这里有一个我刚刚发布的示例，用于顶部导航浮动元素 - http://jsfiddle.net/jmsessink/MyL6Y/2/

请注意，所有的魔法都发生在数学中 -

page.$window.scrollTop() / (page.bodyHeight - page.windowHeight) * (page.navWidth - page.navDivWidth);

希望这能为您的项目提供良好的开端。

编辑＃2 - 以下是我将如何编写您要尝试的内容的示例（只需将背景颜色替换为有角度线条的背景图像） - http://jsfiddle.net/jmsessink/MyL6Y/3/

图像从A点过渡到B点

2 个答案: