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，上方向改变翻转图像

回答

相关问题