Streaming live at 10am (PST)

Change image on scroll page trigger


#1

Riddle me this… the Brand Link in the navigation… I’d like to have a LIGHT image and a DARK image, so that when I scroll and the background-color of the navigation changes, the image can change from the light version to the dark version.

On the “page interaction” of page scroll, there is no option for “display”, which would be my first thought, have the dark version set initial as “display:none” and then change the light to display none on scroll…

Any smart ideas ?


Here is my public share link: ****
(how to access public share link)


#2

Eh, I got it sort of.
I ended up creating two different brand links with two different images in them.
Set the dark one to transform move up 100px. and then move down 100px on scroll.

Movement a little jerky though. WIll work on transition of it.

Unless someone has a better idea.


#3

Depending on the image - let’s say black on white there is the ‘invert’ from ‘effects’ in the main panel right at the bottom. I’ve not tried that or similar in IX2 though, but if it’s available could be an option to play with.

Hope that’s slightly helpful!


#4

I got it actually.
Easy peasy…

  1. Both brand links are set to position absolute.
  2. Set the “secondary one” to opacity 0%
  3. The interaction is as follows: (Page scrolling)
    Image 1 - Start 100% opacity, then 0% opacity
    Image 2 - Start 0% opacity, then 100% opacity

I set the keyframes for 10% for the opacity changes, but you can set it for whatever you want really.
I did it at 1%, so it happens immediately, but I thought it was a tadddd too quick.

Of course, I might change that because 10% will be different based on how deep the page is, whereas 1-5% will be hardly any change