Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Parallax for relative positioned element #236

Open
eugenefrg opened this issue Jul 10, 2021 · 2 comments
Open

Parallax for relative positioned element #236

eugenefrg opened this issue Jul 10, 2021 · 2 comments

Comments

@eugenefrg
Copy link

eugenefrg commented Jul 10, 2021

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
Copy link
Contributor

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
Copy link

sangchu422 commented Mar 5, 2022

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,
    });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants