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 scrolling affect working properly (largely based on this tutorial from TutsPlus).

What I am trying to accomplish is to have it so while the user scrolls down the page, certain elements move/animate into the view from all different angles--being tied to the scroll position. For example, as the user scrolls down the page, an apple enters the view from the top right position of the screen, and as the user continues to scroll down the page, the apple moves in a diagonal path towards the bottom left position of the screen. Should the user scroll back up, the apple would continue along this same path in a backwards fashion. Is this possible with Stellar? Do I have to use a different plugin? Can I use another plugin WITH Stellar to achieve this affect?

Any help on this would be greatly appreciated. If you need any more info, please let me know.

Thanks!

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