How to move/animate elements in from the side with Stellar.js on a vertical scroll?

Question

I\'m using Stellar.js jQuery plugin to create a parallax scroll affect, but I\'m not sure if Stellar supports what I am trying to accomplish. I have the basic parallax scro

Answer 1

Stellar.js supports the creation of position property plugins which allow you to write custom positioning logic.

I've written a sample plugin, called 'apple', which does something resembling what you want:

$.stellar.positionProperty.apple = {
    setTop: function($el, newTop, originalTop) {
        $el.css({
            'top': newTop,
            'left': $el.hasClass('apple') ? originalTop - newTop : 0
        });
    },
    setLeft: function($el, newLeft, originalLeft) {
        $el.css('left', newLeft);
    }
};

You'll notice it includes a ternary which only applies the 'left' value if the element has the 'apple' class:

'left': $el.hasClass('apple') ? originalTop - newTop : 0

This is an example of how you might apply different positioning logic for each element.

So now, you can use the plugin like so:

$.stellar({
    horizontalScrolling: false,
    positionProperty: 'apple'
});

Obviously, you'll need to tweak this to suit your purposes, but this should be enough to get you started.

You can see a demo of this in action on JSFiddle.

Answer 2

Jaypee, I used this code to do it:

$.stellar.positionProperty.custom = {
  setTop: function($el, newTop, originalTop) {

    if( $el.data('stellar-moveleft') !== undefined ) {
      $el.css({ 'left': originalTop - newTop });
    } else if( $el.data('stellar-moveright') !== undefined ) {
      $el.css({ 'right': originalTop - newTop });
    }

    $el.css({ 'top': newTop });

  },

  setLeft: function($el, newLeft, originalLeft) {
    $el.css('left', newLeft);
  }

};

Based off the original answer by markdalgleish , It takes the data-tag: data-stellar-moveleft or data-stellar-moveright to achieve what you desired, the rest of