0

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

使用 jQuery，我能够检索正在使用的滚动百分比。所以假设我的每个部分都有 25% 的间隔（不完全正确，但这只是为了描绘我想要实现的目标......）。所以在 0-25% backgroundA，在 25-50% backgroundB，在 50-75% backgroundC 和 75-100%，backgroundD。

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

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

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

如果您需要更多说明，请告诉我。

谢谢 ！:)

4

2 回答 2

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 个宽度 = 0 的 div，当页面滚动时会增长，最后一个 div 会随着高度增长。你只需要捕捉

于 2012-12-11T16:36:04.250 回答
1

使用提供给您的 OP 的示例，您可能正在寻找的方法是稍微垂直重叠背景图像（线条似乎相互缠绕）并基于 scrollTop 位置，每个触发“步进”功能这些背景中的动画宽度（检查页面上名为 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/

于 2012-12-11T16:42:35.160 回答