Search the Community
Showing results for tags 'logo'.
Found 1 result
-
ScrollTrigger: changing the logo colour depending on the page background colour immediately behind a specific point
Mark Howells-Mead posted a topic in GSAP
I apologise that this question and topic has been addressed in several different ways, but I'm going to need to ask again because none of the situations and solutions cover precisely what I'm looking for. I need to swap the colour of fixed navbar according to the background colour immediately behind it, without being able to know the HTML structure of the page. SVG filters will only go so far, as there is other content besides an SVG logo in the navbar. The requirement is for a transparent navbar containing a logo and other elements to change between light and dark modes when the background behind it is dark or light, so that the navbar content remains visible. There are plenty of solutions online—both with and without GSAP—which solve this by watching an array of sections on the page. A comparatively simple ScrollTrigger solution I've put together on this basis works well. The problem I face is that there are no regular sections to the page, so there is no CSS selector I can apply which will catch every scenario. Sometimes the element with the background color is a direct child of the main content column; sometimes it's nested four levels deep. Sometimes it's a background colour, sometimes it's a background gradient or background image. I cannot affect the HTML being output by the CMS to a sufficient degree that I can ensure regular sections. The idea I've had is to monitor the background colour of a specific point in the browser window (e.g. top left with a 30px offset) using JavaScript (and perhaps a canvas element), then use this measured value to decide which CSS rules to apply to the navbar. Is this even possible? Thank you for any suggestions you might be able to provide!