Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

How do you handle Headers? #269

rabidkitten started this conversation in General
Discussion options

I have an MUI header at the top of my page. When I scroll, the problem is that the opacity doesn't reach 1 until the user scrolls the WELCOME message under the header. How do I set parallax so that it understands there is a set header height at the top of the page and to take that into consideration?

<Parallax
 opacity={[0, 1]}
 scale={[0.75, 1]}
 easing="easeIn"
 style={{ backgroundColor: 'yellow', height: '400px', width: '400px', opacity: 0 }}
 >
 <h1>WELCOME</h1>
</Parallax>
You must be logged in to vote

Replies: 1 comment

Comment options

Progress is determined relative to the viewport but there are a few ways to change this behavior. Using a target element is by far the easiest, because you can use CSS to position the target element so that it starts/stops where you want the parallax to occur. See the target element storybook example

You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet

AltStyle によって変換されたページ (->オリジナル) /