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

var-animal=$（'.animal'）[0]；
var s=skrollr.init({
edgeStrategy:'设置'，
平滑滚动：真，
关键帧：功能（元素、关键帧、方向）{
如果（元素！==动物）{
返回；
}
如果（方向==“向上”）{
animal.style.webkitTransform=“1”；
animal.style.MozTransform=“1”；
animal.style.msTransform=“1”；
animal.style.OTransform=“1”；
animal.style.transform=“1”；
animal.style.msFilter=“flipH”；
}
}
});

另一个问题是，我也尝试过使用

@addClass:MyClass

，所以整个过程都被清理了，在类中而不是在HTML中，但根本不起作用

---

我已经添加了一个示例，其中包含内嵌注释以显示问题

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

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

---

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

您能发布一个提琴吗？“这样我们就可以帮助你了。”大多数情况下，这是肯定的。刚刚快速创建了一个-恐怕这是不可能的。我试图修复您的代码（），但当您使用函数

keyframe

时，这种情况只发生一次，然后，数据属性中的数据值将覆盖此属性@谢谢你的努力。也许你可以想出另一种方法来实现我想做的，但没有关键帧功能？可能是使用一个精灵，图像朝两个方向，然后设置背景位置？这将和现在一样的问题。因为框架（从文档的简短阅读）允许您在两个方向（向上和向下）只做一件事，所以您不能这样做。也许您可以使用

关键帧

功能执行

变换

，这样您就可以根据方向决定在何处以及如何设置动画。问题是您需要自己“实现”关键帧功能。谢谢。在小提琴中，向上滚动效果很好（动物朝向正确的方向），但向下滚动则不行。在我的提琴中，它的方向是正确的，向下滚动，而不是向上滚动。没关系，它实际上只是在移动设备上做的，其中一个方向是错误的。桌面工作正常，谢谢。你知道为什么我的

@class

不能在我的小提琴上演奏吗？