Skrollr 背景动画不会交换答案

【问题标题】：Skrollr Background Animation Won't SwapSkrollr 背景动画不会交换
【发布时间】：2015-04-27 14:26:32
【问题描述】：

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

查看图片：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

【问题讨论】：

标签： javascript html css skrollr

【解决方案1】：

动画背景不像动画位置或“数字”数据。你不能只是通过淡化它们将一个背景转换为另一个（实际上 Firefox 可以通过某种方式为过渡设置动画，但我们不要依赖于此）。

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

另外我发现你的滚动等级不足以完全淡化晴朗天空的不透明度，它以0.603448结尾。

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

【讨论】：

【解决方案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>

【讨论】：