Question

大家好我试图使用skrollr.js（https://github.com/Prinzhorn/skrollr）在我网站的页脚部分交换两个图像的背景。出于某种原因，它根本不会滚动。我正在尝试创建一个在下面部分固定位置的视差站点。

这是该部分的标记：

 <div id="starynight" 
                data-bottom-top="opacity: 1; background: !url(images/sunny.jpg); background-size: cover;"
                data--40-top="opacity: 0.5; background: !url(images/night.jpg); background-size: cover;"
                data--50-top="opacity: 0; background: !url(images/night.jpg); background-size: cover;"
                 data--60-top="opacity: 0.5; background: !url(images/night.jpg); background-size: cover;"
                data--70-top="opacity: 1; background: !url(images/night.jpg); background-size: cover;"
                >

                </div>

虽然这里是CSS：

#starynight{
    background: url('../images/sunny.jpg') no-repeat center;    
    width: 100%;
    height: 307px; 
    background-size: cover;

}


#road{
    background: url('../images/road.jpg') no-repeat center;
    width: 100%;
    height: 145px;
  background-size:cover;

}

#car{
   background: url('../images/car.png') no-repeat center;
  width: 325px;
  height: 125px;
  display: block;
  position: absolute;
  z-index: 9999;
  left: 950px;
  top: 2100px;

}

我的问题是，当我滚动浏览网站的这一部分时，它应该交换sunny.jpg和night.jpg的图像，同时汽车从右向左移动，并且此背景图像也必须固定在适当的位置。出于某种原因，我的代码不会起作用。知道出了什么问题吗？

请在此处查看我的网站：http://goo.gl/aNOCiJ

Answer 1

动画背景不像动画位置或“数字”数据。您不能通过淡化它们将一个背景转换为另一个背景（实际上，Firefox可以为转换设置动画，但不要依赖它）。

你的问题的解决方案是有2个不同的div，1个用于你的夜景，而另一个用于你在阳光明媚的天空，只是在同一个位置，一个在另一个上，而阳光明媚的一个有更高的z-index。那么你需要在滚动上制作动画是晴天的不透明度，是什么让夜景出现。

此外，我发现您的滚动级别不足以完全消除晴朗天空的不透明度，它以0.603448结束。

希望它有所帮助，请告诉我这是否有效。

Answer 2

如前所述，背景图像无法设置动画，只能显示背景颜色。因此，您必须将两个图像放在彼此之上并像这样淡化顶层 -

*未测试

#starynight-wrap {
  position: relative;
  width: 100%; height: 307px;
}

#starynight-day {
  position: relative;
  width: 100%; height: 100%;
  background: url('images/sunny.jpg');
  background-size: cover;
}

#starynight-night {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url('images/night.jpg');
  background-size: cover;
}

<div id="starynight-wrap">
     <div id="starynight-day"></div>
     <div id="starynight-night"
         data-bottom-top="opacity: 0"
         data--50-top="opacity: 0;"
         data--60-top="opacity: 0.5;"
         data--70-top="opacity: 1;"
         >
    </div>
</div>

Skrollr背景动画不会交换

2 个答案: