Hi there!

First of all, thanks for your work. This is a really good library!

I encountered some issues regarding the smoothness of the parallax effect. The elements which have the parallax effect attached are jumping around a bit and do not move smoothly.

After trying out some things I believe that the behavior somehow depends on the speed of the element you declare with the data-rellax-speed attribute since elements with speed -7 are for example jumping around much more than elements with speed 7. So, it seems like the lower the speed, the worse the problem.

In order to illustrate the problem a bit, I have created a Pen which has four elements with different speeds. Furthermore, I have recorded a short clip to better clarify what I mean with "jumping around".

Link to the Pen: https://codepen.io/jr-cologne/pen/jagaMK Link to the video: https://streamable.com/rxghi

I tested the whole thing in the following browsers:

• Chrome version 63.0.3239.84 64 bit (working fine)
• Chrome Mobile version 63.0.3239.107 (affected)
• Firefox 57.0.2 64 bit (a bit worse than Chrome, but still reasonable)
• Edge 16.16299 (definitely affected)
• IE 11.64.16299.0 (same as Edge)

Thank you in advance for any efforts you put into this issue!

Best regards from Germany, @jr-cologne

Added the attribute data-rellax-percentage, to make it possible to easily offset elements (relatively to their initial position). This avoids elements further down the page to be too far away from their initial position when you scroll past them. For example, if you set the data-rellax-percentage to 0.5, the element will be in it's initial position when it's scrolled into the viewport's center.

First of all, thank you for publishing this wonderful plugin. I am looking for ways to parallax within a certain section. I read the document and wrote it as it was written, but it does not move. I want to move only div in body, but what should I do?

It doesn't work...

Hi. Love this library on desktop. But in general I hate parallax on mobile devices due to wierd browser address bar behavior. Is there any tips how to disable rellax on mobile? I could detect mobile devices, but what next?

This addition originates from the need to let movement be relative to a wrapper, rather than scroll position of a wrapper or the scroll position of the window. We'll use the wrappers vertical offset, and subtract it from the scrollposition, to enable an effect, that feels like the element is relative to its wrapper instead.

Simply a boolean, telling us whether or not it should be relative to the container selected in the wrapper option.

Hi,

I recently did find Rellax and wanted to use it on my website. I did the following:

1. Link the script at the bottom of my page like this: <script src="js/rellax.js"></script> Yes I don't use the minified version for the development process.
2. I added the .rellax class to all my desired elements
3. I added this code at the bottom of may page aswell: <script> var rellax = new Rellax();</script>
4. I refreshed the page to see the result, but none of the elements are moving. The style get's added but stays at transform: translate3d(0px, 0px, 0px); even when scrolling.

I am using the latest version of your script and Chrome version 63.0.3239.132.

So I hope you can help me fixing this problem or maybe I dicovered a bug.

How feasible is it to implement a 'delay' method so it would be possible to keep some elements in place for specified amount of time before they get animated (follow the scroll)? Primary use is for the elements that are located "above the fold". Looking for a way to start parallax scroll with elements animated one by one.

I am having a newsfeed with images+titles below them like Flipboard. I am applying the parallax effect to the images just like Flipboard app. And after trying many plugins, rellax is doing the best job for all its simplicity and lightweight.

But am wondering how to make the parallax effect run only when elements come into viewport. This will be helpful to make the effect more pronounced as right now at the default of -2 speed and 0.5 rellax percentage, the images in the bottom of the feed, when they come into the viewport, are way off from their respective titles.

Needed option in #26

Example of use:

var rellax = new Rellax('.rellax', {
    wrapper: document.querySelector('.wrapper') // DOMElement
});

or

var rellax = new Rellax('.rellax', {
    wrapper: '.wrapper' // selector
});

By setting the data-rellax-boundary to a valid parent element of the '.rellax', you can stop an element from rellaxing at a certain point. This is useful if you don't want the element to overlay anymore.

I am trying to get an object to nearly don't move at all. How can achieve this? Using data-rellax-speed="-10" data-rellax-percentage="0" gave me the best result, but is there another, cleaner way to get even less movement?

As far as I understood it values above 0 mean the element is moving faster than the "default" speed, while values below 0 lead to a slower than "normal" speed movement, but correct me if I'm wrong here.

Be aware of the fact that I am using position: absolute; for every Element.

I've attached an archive with the project in it so one can get a better understanding of my situation web.zip

Hi,

I have an accordion that opens and closes divs on click. When they are all open, the rellax content in a lower section gets pushed out of its wrapper in overlaps other content.

Enumerating changes in the rellax.js file:

1. Line 93 - leadByViewPOrt new configurable attribute for the initialization action.
2. Line 402 - New isInViewPort() function to check targeted element position according to ViewPort.
3. Line 420 - New conditional added to allow animation according to leadByViewPort attribute value.

When relax items are on the very top of the page their position is predictable (https://codepen.io/iosystems/pen/VwrVeOV): the three boxes start in the middle of the container.

On the contrary, when there is content above the container, rellax items positions is unpredictable (https://codepen.io/iosystems/pen/rNYQeQZ): box 1 and 3 are already outside their container.

Question is: is there any way to say "start in the original position, despite the fact that there is content above it"?

Added a condition to make sure scroll event listeners are not being applied to the wrapper element if relativeToWrapper is true. This fixes issue #170 .

Has anyone been able to use the callback to change anything outside of positions? It seems like it's not doing anything other than bringing back X & Y coordinates.

Examples welcomed here