CODEWITHSUNDEEP
jqueryhtmlparallax
Mauricio Soares
Mauricio Soares

Reputation: 3640

Stop parallax using stellar.js

I'm using the stellar.js parallax...

Is there a way to make elements stop in a certain position using this plugin?

when it gets to top 300px don't parallax anymore?

Thanks...

Upvotes: 1

Views: 3934

Answers (1)

markdalgleish
markdalgleish

Reputation: 666

Stellar.js allows you to write position property plugins, which alter the way in which elements are positioned during scroll.

I'm not exactly sure what you mean by "when it gets to top 300px", but let's look at a similar example to get an idea of how it works. If you wanted to set a limit on how far down an element could move, you could write a plugin that looks like this:

$.stellar.positionProperty.limit = {

  setTop: function($element, newTop, originalTop) {
    var limit = 300;

    // Check if we're going over the limit
    if (newTop - originalTop > limit) {

      // Call default position property with our limited value
      $.stellar.positionProperty.position.setTop.call(null, $element, originalTop - limit, originalTop);

    } else {

      // Otherwise, delegate to the 'setTop' method of the 'position' adapter
      $.stellar.positionProperty.position.setTop.apply(null, arguments);

    }
  },

  // Nothing custom needed here, so we'll just use the built in adapter:
  setLeft: $.stellar.positionProperty.position.setLeft

}

Note that you also have access to the element in the 'setTop' and 'setLeft' functions (via the '$elem' parameter), allowing you to customise logic per element, which would let you target elements at the top of the screen, if that's what you were after.

Now, we can use our new 'limit' plugin with Stellar.js like so:

$.stellar({
  positionProperty: 'limit'
});

Upvotes: 2

Related Questions