Streaming live at 10am (PST)

Change element color on Scroll

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.

Thanks all!


Here is my public share link: LINK

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.
2 Likes

Thank you @HGWeb I’ll give it a try and report back!

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.