Hi! I am trying to create an effect where when I scroll down, at a point in my page the background will change color (in my case to blue). I have a group of text boxes as my page title I want the colors of the texts to change with the background as I scroll down (or up). I’ve attached a gif to explain this movement better. As the page scrolls up, I want new text colors to be revealed with that new background border. Is that possible to do?
(Right now I have another group of the same texts in a different set of colors that I want the swipe reveal to happen with)
well you could add a “blending mode” to your logoelement which then changes color depending on the background. But this can mean, that you will not get the exact desired colors.
Another solution could be to try to built a kind of “hack around”: You have the logo twotimes, onetime with color1 and again with color2. Add an animation on the two logos, one fading out and one in at the specific scroll position. This will not reproduce exactly what you want, but might also work.
The last approach would be to use custom code to do it, but isn´t that easy. But doable.
(keywords: objection observer / and a logo as svg which changes its color if the background comes in view with the help of js)
I did look into these options but they were beyond my capacity… However, I did find a hack around it by making a different set of texts with opacity animations on scroll. One disappearing and one set appearing at the same point on the page!
Thank you for help anyways!
1 Like