I’m trying to create an interaction that makes the background color fade out and the next background color show through as you scroll. However, while I’ve got it working, more or less, I can’t figure out how to make the background divs stay fixed. Because the BG isn’t staying fixed, you see the hard edges between sections when scrolling - I just want the color in the back to change, without scrolling itself.
Of course, I have them set to “fixed” and “full”.
I’ve tried removing the jquery, I’ve tried reorganizing the hierarchy, I have no idea what is going on. Please help?
Specifically I mean this test page: https://deer-island-studio.webflow.io/project-page-03#2
Here is my public share link: https://preview.webflow.com/preview/deer-island-studio?utm_medium=preview_link&utm_source=dashboard&utm_content=deer-island-studio&preview=8cfc3dc238548fd43ccbadf0a5b3c40d&mode=preview
@DeerIsland I’m wondering if you could use the Change Background feature in the scroll animation timeline. See below.
The section with the color changing background is set to fixed with a z-index of 1. There’s a second section where your content could appear. I’m using the same number of content Divs (set to 100VH) as there are color changes in the scroll animation.
https://preview.webflow.com/preview/gradient-fade?utm_medium=preview_link&utm_source=designer&utm_content=gradient-fade&preview=c8cc884c441b277edc318f4c16afed0f&mode=preview
Here it is published:
https://gradient-fade.webflow.io/
I love your design btw!
Wow, didn’t know that was a thing! Thank you so much! I only mostly understand how this works, but hey, it does work. Major breakthrough, thank you again.
I’m still fumbling through a lot of the Webflow capabilities. My biggest breakthrough has been understanding how absolute positioning works. An absolute div inside a static parent will orient to the screen. An absolute div inside a relative parent (or a fixed parent) will orient to its parent. Using that info with view-height settings, and z-indexes, allows for some really cool scrolling behaviors.
BTW, your example got me to wondering about applying some gradations to each section. I just updated the above links to show a border color change on scroll-into-view. So far, Webflow is blowing me away.
Your site and its colors are really gorgeous… and the parallax feature really sets the stage. Nice work.
Well, thanks! It’s all just a messy demo until I can make things work. Here’s an update since you fixed my big problem: https://deer-island-studio.webflow.io/project-page-03#1
Now if only I can make the scroll-jacking work smoother…
Still a proof of concept, but yeah, I’m loving webflow, too! I really appreciate you leading me to water with the “absolute” positioning.
LOVING the border changes, especially the hotness with magenta.
@DeerIsland Shoot, your “messy demo” looks pretty incredible. As for the “scroll-jacking,” do you mean how on mouse-over a few of the parallax animations move up about 50 pixels or so? Otherwise the site looks really smooth.
Hmm, now I’m worried about what you’re seeing. Which elements jump?
For scroll-jacking, I mean how when you start to scroll, it jumps you down to the next section rather than scrolling freely (anchor scrolling?). I really like controlling where the viewport falls, especially as you add some staggered animated elements to each little section.
I just realized what’s going on for me… when I’m scrolling, and then move the cursor over to one of the parallax animations, the viewport centers on the animation. That actually seems like it’s working like it should. Crap, don’t mind my alarming comments 
BTW, because I’m using a stylus, I’m scrolling with the scroll bars… it’s working beautifully. Are you scrolling with a scroll wheel or track pad?
Scroll wheel! Hmm, interesting. Maybe I shouldn’t worry about the scroll jacking so much. Yeah, the 3D-movement thing is a mouse-hover effect, probably strange with a stylus…
IMO, the re-centering of the viewport is actually handy.