Skrollr, листать изображения на изменение направления

Question

У меня есть изображение животного смотрящего влево, что при прокрутке, перемещается влево -> переворачивается по горизонтали -> движется вправо -> переворачивается по горизонтали и т.д.

Этот вопрос, когда пользователь прокручивает вверх, животное идет назад. На direction === 'up' Я пытаюсь получить изображение, чтобы перевернуть сразу, поэтому, когда пользователь прокручивает его, он обращается к правильному пути, в котором он движется.

<span class="animal skrollable skrollable-between" 
    data-100="right: 2%;" data-400="right: 78%;" 
    data-401="-moz-transform: scaleX(-1); 
      -o-transform: scaleX(-1); 
      -webkit-transform: scaleX(-1); 
      -ms-transform: scaleX(-1); 
      transform: scaleX(-1); 
      -ms-filter: 'FlipH'; 
      filter: FlipH;" data-700="right: 2%;" data-701="-moz-transform: scaleX(-1); 
      -o-transform: scaleX(1); 
      -webkit-transform: scaleX(1); 
      -ms-transform: scaleX(1); 
      transform: scaleX(1); 
      -ms-filter: 'FlipH'; 
      filter: FlipH;" 
    data-900="right: 78%;" data-901="-moz-transform: scaleX(-1); 
      -o-transform: scaleX(-1); 
      -webkit-transform: scaleX(-1); 
      -ms-transform: scaleX(-1); 
      transform: scaleX(-1); 
      -ms-filter: 'FlipH'; 
      filter: FlipH;" 
    data-1450="right: 2%;" style="right: 2%;"> 
</span> 

Script

<script> 
    var animal = $('.animal')[0]; 

    var s = skrollr.init({ 
    edgeStrategy: 'set', 
    smoothScrolling: true, 
    keyframe: function (element, keyframe, direction) { 
     if (element !== animal) { 
     return; 
     } 

     if (direction === 'up') { 
     animal.style.webkitTransform = "1"; 
     animal.style.MozTransform = "1"; 
     animal.style.msTransform = "1"; 
     animal.style.OTransform = "1"; 
     animal.style.transform = "1"; 
     animal.style.msFilter = "flipH"; 
     } 
    } 
    }); 
</script> 

Другой вопрос заключается в том, что я также попытался с помощью @addClass:MyClass так что все очищается, в к классу, а не в HTML, но это не работает все.

Я добавил пример для скрипки с встроенными комментариями, чтобы показать проблемы. http://jsfiddle.net/dp5zvxwk/1/

Answer 1

Используйте элемент оболочки вместо того, чтобы пытаться перевернуть сам элемент. Для этого я добавил класс skrollr-up/down для этого документа.

.skrollr-up .animal { 
    transform: scaleX(-1); 
} 

http://jsfiddle.net/dp5zvxwk/3/

Пожалуйста, убедитесь, что вы понимаете, HTML и CSS очень хорошо, прежде чем пытаться использовать skrollr.