Фоновая анимация Skrollr не будет меняться местами

Привет, ребята, я пытался поменять фон двух изображений в нижнем колонтитуле моего сайта с помощью 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
person Sam Glass    schedule 27.04.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Анимация фона не похожа на анимацию позиций или «числовых» данных. Вы не можете просто преобразовать один фон в другой, затухая (на самом деле Firefox каким-то образом может анимировать переход, но давайте не будем зависеть от этого).

Решение вашей проблемы состоит в том, чтобы иметь 2 разных div для: 1 для вашей ночной сцены и другого для вашего солнечного неба в одном и том же положении, один над другим и с солнечным с более высоким z-индексом. Затем вам нужно анимировать при прокрутке непрозрачность солнечного неба, благодаря чему появляется ночная сцена.

Также я обнаружил, что вашего уровня прокрутки недостаточно, чтобы полностью скрыть непрозрачность солнечного неба, он заканчивается на 0.603448.

Надеюсь, это поможет, пожалуйста, скажите мне, если это сработало.

person Vandervals    schedule 28.04.2015

arrow_upward
0
arrow_downward

Как уже говорилось, фоновые изображения не могут быть анимированы, только фоновые цвета. Таким образом, вам придется наложить оба изображения друг на друга и затемнить верхний слой следующим образом:

* Не проверено

#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>

person tojowe    schedule 07.05.2015