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>
  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 所以整个事情都被清理成了 class 而不是 HTML，但它不是完全在工作。

我在 fiddle 中添加了一个示例，其中包含内联注释以显示问题。 http://jsfiddle.net/dp5zvxwk/1/

Answer 1

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

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

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

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

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

Skrollr, flipping image on direction change

html

javascript

css

jquery

skrollr