1

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

据我所见，大多数视差效果都假设您希望能够在许多背景图像滚动或重复的巨大图像时无限滚动。

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

请参阅下图以直观地解释我希望达到的效果：

在此处输入图像描述

视口的高度将根据内部 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 大小获得正确的比例超出了我的数学能力。

4

2 回答 2

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/

谢谢...

于 2013-07-12T07:20:41.730 回答
1

事实证明，我想要实现的目标不需要特殊的插件，只需一些经过深思熟虑的数学。我确实使用了一点 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();
});
于 2013-07-13T07:56:54.047 回答