Help! How do i have a changing color background and header when scrolling?

General topics
1

Hi there guys!! i have set up a preset that when you scrolls the background color changes but i also want to have the header stack and changing color matching the background color when scrolling. Here’s an example https://toryrust.com/work-overview/

Does anyone knows how i can create that for the header to match the same background color??

Thanks!!

2

I would layer large coloured rectangles on top of each other, and on scroll have the front one fade out to give the appearance of changing colours. You can do that both with the main background and with the header background separately with the same timings to achieve the effect you’re looking for.

3

They recently added a Preset for that; have you check it? In your case, I would use that, and simply fix the header text on the top part of the screen.

5

Thank you!! i’ll try this also!!

6

Thank you! i tried this!! in the background the preset works amazing but when i put it again for the header and click “fix on screen” just two colors appears instead of 4 :frowning: idk whyy!!

7

Interesting!

I checked and the way Readymag built up that preset is with on scroll animation, fixed full height and with start point bottom. Since this is fixed full height, the starting point is the bottom of the page. If you use the same preset for the header, it won’t work right from the start as it will have different starting point compared to the one use for the background. You will have to play around with the the animation settings (make it slower or move the layers order) to find a balance and make them match.

I gotta say, this won’t be an easy task.

Maybe someone else knows a better route…dunno.