javascript - Skrollr 背景动画不会交换

Question

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

见图:http://prntscr.com/6yrckx

这是该部分的标记:

 <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，一个用于您的夜景，另一个用于您晴朗的天空，只是在相同的位置，一个在另一个之上，并且阳光明媚的 z-index 更高。 然后你需要在滚动上制作动画的是晴朗天空的不透明度，是什么让夜景出现。

我还发现你的滚动级别不足以完全淡化晴天的不透明度，它以 0.603448 结尾。

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