javascript - 如何根据滚动条移动移动 DIV 的背景图像？

Question

我一直在调查 parallax effects在我的网页上垂直滚动，经过一些研究，我不确定我想要做的是技术上的视差效果。

据我所知，大多数视差效果都假定您希望能够无限滚动，其中有许多背景图像滚动，或者有大量重复的图像。

我想要做的是在滚动条到达页面底部时用背景图像填充两个 DIV 的背景。 请注意，我不希望背景图片拉伸(stretch)。我假设要获得我想要的效果，这些图片的垂直高度会比大多数人的视口(viewport)大，然后它们的垂直位置会发生变化.当用户的滚动条位于顶部时，一定量的背景是可见的，然后随着用户向下滚动，它会垂直移动以填充背景空间。

请查看下图，以直观地了解我希望达到的效果:

视口(viewport)的高度将根据内部 DIV 中内容的长度而变化。

我的问题是，如果我尝试做的不完全是视差效果，那么我不知道还能调用它什么，并且我通过描述它进行搜索的尝试总是让我回到提供教程的页面视差效果。因此，我一直因缺乏术语而感到困惑。

如果有人可以指导我如何根据滚动条位置控制背景的垂直位置，将不胜感激。如果只用 CSS 就可以做到这一点，那就太好了，但我假设需要一些 Javascript。 jQuery 解决方案也适合我。

---

更新:

使用评论中提供的术语进行搜索后，我在外部 DIV 中获得了背景图像，几乎可以使用以下代码执行我想要的操作:

$(window).scroll(function () {
var yPos = $("#outerDiv").height() - ($("#outerDIV").height() * ($(window).scrollTop() / $(window).height()));
document.getElementById('outerDIV').style.backgroundPosition="0px " + yPos + "px";
});

它在相对于滚动的正确方向上移动背景图像，但它缺少的是将该运动限制在视口(viewport)内。事实证明，根据视口(viewport)和 DIV 大小获得正确的比例超出了我的数学能力。

Answer 1

根据您的要求，您必须使用 jquery 视差插件 来指导此事件，我最好建议它使用 Superscollorama并随心所欲地使用这些元素...

至于你的问题，试试这个例子，

controller.addTween(
    '#examples-background',
    (new TimelineLite())
    .append([
        TweenMax.fromTo($('#parallax-it-left'), 1, 
        {css:{backgroundPosition:"(0 -54px)"}, immediateRender:true}, 
        {css:{backgroundPosition:"(0 -54px)"}}),
        TweenMax.fromTo($('#parallax-it-right'), 1, 
        {css:{backgroundPosition:"(0 -54px)"}, immediateRender:true}, 
        {css:{backgroundPosition:"(0 54px)"}})
    ]),
1000 // scroll duration of tween
);

你的系列恶习随心所欲地改变......

尝试练习这个插件，希望对你有用...

http://johnpolacek.github.io/superscrollorama/

谢谢...