Search code examples
javascriptjqueryhtmlcssskrollr

Skrollr, flipping image on direction change

I have an image of an animal facing left that, when scrolling, moves left -> flips horizontally -> moves right -> flips horizontally, etc.

The issue is when the user scroll up, the animal goes backwards. On direction === 'up' I'm trying to get the image to flip immediately so when the user scrolls it is facing the correct way in which is it moving.

<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

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

The other issue is that I've also tried using @addClass:MyClass so the whole thing is cleaned up, in to a class rather than in the HTML, but it's not working at all.

I've added an example in to a fiddle with inline comments to show the issues. http://jsfiddle.net/dp5zvxwk/1/

Solution

  • Use a wrapper element instead of trying to flip the element itself. I added a skrollr-up/down class to the document to achieve that.

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

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

    Please make sure you understand html and css very well before trying to use skrollr.