Streaming live at 10am (PST)

Using 'while scrolling in view' correctly for a header

Hi all,

I’ve had this on several projects but have my mind set on finally fixing this issue…

I have a header which is 500px high with an image and a title. I want to create sort of a parallax effect when scrolling, where I move the title that’s on there.

However, always when I try this, the scroll % is set dependant on the height of the viewport. So on my big monitor, when I load the page, the scrolling animation is already at 60%. I’ve tried changing the settings of ‘fully visible’ ‘starts entering’ and the offset settings, but I can’t get it properly… I simply want the animation to always be at 0% when the page is scrolled all the way to the top, regardless of the size of someones viewport, and to be at 100% when the 500px header section is completely invisible…

Any help would be greatly appreciated!

Here is my public share link: