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.