Skrollr，上方向改變翻轉圖像

我已經動物的圖像朝左即，滾動，左移動時 - >水平翻轉 - >向右移動 - >水平翻轉等Skrollr，上方向改變翻轉圖像

的問題是當用戶向上滾動，動物倒退。在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> 
    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/

來源

2015-10-14 DT.DTDG

你能張貼小提琴嗎？所以我們可以幫助你。 –

@MoshFeu當然可以。剛剛創建一個 - http://jsfiddle.net/dp5zvxwk/1/ –

恐怕這是不可能的。我試圖修復你的代碼（http://jsbin.com/vinabar），但是當你使用'keyframe'函數時，這隻會發生一次，然後data屬性中的數據值會覆蓋這個屬性; –

使用包裝元素而不是嘗試翻轉元素本身。爲了達到這個目的，我在文檔中添加了一個skrollr-up/down類。

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

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

請確保您瞭解HTML和CSS之前很好的嘗試使用skrollr。

來源

2015-10-26 08:28:07 Prinzhorn

謝謝。在你的小提琴中，向上滾動工作正常（動物面對正確的方式），但向下滾動卻不行。在我的小提琴中，我面對正確的滾動，但沒有。 –

不要緊，它實際上只是在移動方向上做一個方向不正確。桌面工作正常，謝謝。任何想法爲什麼我的'@ class'不在我的小提琴中工作？ –

Skrollr，上方向改變翻轉圖像

回答

相關問題