I watched a Webflow video clip entitled ‘Scroll Progress Indicator - Webflow interactions and animations tutorial’ and was wondering if the indicator bar when in reached a new section on a webpage, that is would automatically change to the background color of the section.
Example: I have five sections on my webpage, sections 1-5. The color of the 1st background is red, 2nd section white, 3rd blue, 4th green and 5th yellow. The progress bar would initially be red and as i scrolled down to the second section the progress bar would keep the red for the initially section and while in the 2nd section that part of the progress bar would be white, when i scrolled to the 3rd section, the progress bar would be red for the 1st second, the white for the 2nd section and then while in the 3rd section would blue…
Basically the progress bar would be the color of the current section and would maintain the colors from the previous sections.
I may have time to think it through more tomorrow, but maybe making the scroll progress bar 5 individual divs that start the same colour, then as you get to the next section, div 1 retains it’s colour, but the other 4 change to match the new section. Then on the following section divs 1 and 2 retain their individual colours but the remaining 3 change to match the new…and so on…
I can see it in my brain, just need time to try it out on canvas!
Basically, i’ve added a 20% coloured div for each section inside a 100% wrapper with fixed position (top)
Then i’ve added a grey ‘cover’ div over this wrapper - fixed position - with a higher z-index than the wrapper.
Then added a ‘while page is scrolling’ interaction to the grey ‘cover’ div, so it goes from a 0% X axis point at the top of the page to 100% right on the X axis at the foot of the page.
Using this interaction, it is auto-reversed, so scroll back up and the divs are ‘covered’ once more back to the initial state.
I didn’t watch the video you mentioned initially, I wanted to test out my knowledge, but it looks like slightly different techniques were used, with the same scroll interaction to get to a similar end goal.
There’s often a few ways to achieve the same thing in web design, and Webflow itself - there may be a more efficient way than mine - but not bad for a quick weekend challenge!
Did you change something? The bar work fine scrolling down, but if you are at the last section and scroll up the color appears to be red and not the color of the 5th section?
Fun idea. I could also see the scrollbar divs being links to each of those sections to quickly jump back up the page. Maybe with a hover effect to reveal the section title too.