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

Question

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

从我所看到的情况来看，大多数视差效果都假设您希望能够无限期地滚动许多背景图像，或者使用重复的巨大图像。

我想要做的是当滚动条到达页面底部时，让两个DIV的背景填充背景图像。 请注意，我不希望背景图像伸展。我假设我想要的效果是这些图像的垂直高度比大多数人的视口大，然后它们的垂直位置会改变。当用户的滚动条位于顶部时，可以看到一定量的背景，然后当用户向下滚动时，它会垂直移动以填充背景空间。

请参阅下面的图片，以获得我希望实现的效果的直观解释：

veiwport的高度将根据内部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";
});

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

Answer 1

根据您的要求，您必须使用 jquery parallax插件来指导此活动，我建议您使用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/

...谢谢

Answer 2

原来我想要实现的是没有特殊的插件，只是一些经过深思熟虑的数学。我确实使用了一些jQuery语法，但我认为这不是必需的。

下面的代码有大量的注释，所以希望它在很大程度上是解释性的。总之，您只需要在滚动位于顶部时找到背景图像的位置，以及滚动条位于底部时的位置，然后您可以使用滚动条移动的百分比找出你在这两点之间的位置。当然，这只是一个小小的琐事，因为你需要考虑滚动条的总高度和你的DIV在页面上出现的位置之间的差异以及其他一些调整，但我所做的细节是下方。

我在这里所做的只是针对我在问题中描述的“外部DIV”。为了让背景像我描述的“内部DIV”一样移动，您必须修改代码，可以通过反转几个参数来修改代码。我还没有这样做，但这似乎是一项简单的任务。

希望其他人认为此代码有用。如果有人建议如何提高效率或更好，请告诉我。

function moveBG(){
   // imageHeight is not the total height of the image,
   // it's the vertical amount you want to ensure remains visible no matter what.
   var imageHeight = 300;
   // Get the maximum amount within the DIV that the BG can move vertically.
   var maxYPos = $("#outerDIV").height() - imageHeight;
   // Get the amount of vertical distance from the top of the document to
   // to the top of the DIV.
   var headerHeight = document.getElementById("outerDIV").offsetTop;
   // Calculate the BG Y position for when the scrollbar is at the very top.
   var bgTopPos = $(window).height() - headerHeight - imageHeight;
   // I don't want the image to wander outside of the DIV, so ensure it never
   // goes below zero.
   if (bgTopPos < 0)
   {
      bgTopPos = 0;
   }
   // Calculate the BG Y position when the scrollbar is at the very top.
   var bgBottomPos = $(document).height() - $(window).height() - headerHeight;
   // To prevent the BG image from getting cut off at the top, make sure
   // its position never exceeds the maximum distance from the top of the DIV.
   if (bgBottomPos > maxYPos)
   {
      bgBottomPos = maxYPos;
   }
   // Subtract the top position from the bottom, and you have the spread
   // the BG will travel.
   var totalYSpan = bgBottomPos - bgTopPos;
   // Get the scrollbar position as a "percentage". Note I simply left it as a 
   // value between 0 and 1 instead of converting to a "true" percentage between
   // 0 and 100, 'cause we don't need that in this situation.
   var scrollPercent = ($(window).scrollTop() / ( $(document).height() - $(window).height()));
   // The percentage of spread is added to the top position, and voila!
   // You have your Y position for the BG image.
   var bgYPos = bgTopPos + (Math.round(totalYSpan * scrollPercent));
   // Apply it to the DIV.
   document.getElementById('outerDIV').style.backgroundPosition="0px " + bgYPos + "px";
}
// Place the BG image correctly when opening the page.
$(document).ready(function() {
   moveBG();
});
// Make it update when the scrollbar moves.
$(window).scroll(function () {
   moveBG();
});