Hi, I’ve implemented @PixelGeek 's awesome Background Scroll interaction and now I’m trying to make an element change color at the same time. In my public share link below, it’s the iris of the eye element in the navigation, which is actually a div.
I tried a scroll into view interaction but the iris div would change once and not back again if I scrolled up. Same is happening with the background color. It changes color on scroll down, but not up. Any suggestions? I’m guessing I’m missing some basic settings that’d take care of this.
Hello.
You can make a interaction to do this.
Go to - ‘while page is scrolling’
create a custom animation (I called it Iris)
select the Eye Iris div that holds the BG color.
then select under style - BG color
On the bottom off the panel you can select the background color to start with.
Now the BG color is set for the start off the page.
select the second BG color at the end off the page or at any other position.
You can add as many BG points ass you
Save, and the color changes as you scroll the page.
I Tried it and it works well, however it becomes tricky to control that the color switch happens exactly on the new section of content, especially if the client later adds more content that modify’s the page’s total height!
Thanks though, it’ll be a good fallback if I can’t get the scroll into view to work.