dixonandmoe / rellax

Lightweight, vanilla javascript parallax library
https://dixonandmoe.com/rellax/
MIT License
7.04k stars 880 forks source link

Parallax for relative positioned element #236

Open eugenefrg opened 3 years ago

eugenefrg commented 3 years ago

I built my project with Rellax, and I'm trying to apply rellax to the a component where I want to make the elements move down only at the point it appears in view.

but it seems the transform offset is too large that by the time I reach the component by scrolling, the elements are too far below. I think I would suggest to add in an offset parameter since I can see it calculates using the scroll position.

I have this as an example: https://codepen.io/eugenefrancisrebong/pen/yLbabNR

What I want to happen is when the element that I'm trying to move only move when the user scrolls to the container and the container fully visible

I've done some digging in the code, but it seems using the minY or maxY does not change this behavior. Neither would using wrapper for the element containing the elements that I want to move. It just sits still

p-realinho commented 2 years ago

Hi! There is an option that, is not documented, but, I think is what you're looking for. You can use data-rellax-min and/or data-rellax-max to limit how far the elements can go. Combine that with the centering option and I think you'll be able to get the result you were going for. There's an example in the tests directory, have a look at the range.html. I know this is an old issue, but hopefully this answer can be of help for someone facing the same problem. Let me know if that helps!

sangchu422 commented 2 years ago

Then, Can I use this data-rellax-min or data-rellax-max like this?

      new Rellax(rellaxRef.current, {
      speed: 3,
      center: true,
      wrapper: null,
      round: true,
      vertical: true,
      horizontal: false,
      min: 0,
    });