Question

我有一张面向左侧的动物图像，当滚动时，向左移动 - ＆gt;水平翻转 - ＆gt;向右移动 - ＆gt;水平翻转等等。

问题是当用户向上滚动时，动物会倒退。在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/

Answer 1

使用包装元素而不是尝试翻转元素本身。我在文档中添加了一个skrollr-up / down类来实现它。

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

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

在尝试使用skrollr之前，请确保您非常了解html和css。

Skrollr，在方向改变时翻转图像

1 个答案: