Streaming live at 10am (PST)

Creating a color changing fixed logo


#1

Ok Webflow Guru's....

What's the easiest way of creating a logo that changes color while scrolling past a section or div?

example: http://cincodesign.com/studio

It changes from white to black on certain sections.

FYI the logo is a flat text based svg


#2

Try to put that svg images in every section as a background image, at exactly same place with option fixed.


#3

I wonder if you can upload a svg into a webfont creator and then change it like you would font color. When filters are eventually available in interactions, it will be a breeze.


#4

@Dfink @sabanna Thanks for the help! I appreciate it!

Not sure about adding the svg as a webfont, I never tried that but it's a cool idea! I wouldn't be able to do it regardless, even though the logo is flat text based, it's been tweaked and changed from it's original origin of font.

Adding the svg image as a background would fix the issue but then there are sizing limitations and the fact I can't have the logo be a link back to home etc. unless i place a empty fixed link block over the area.

There must be a way to do this with multiple colored svg files and interactions? hidden overflow etc.?


#5

I didn't mean uploading letters into a font. I meant uploading the entire logo as a letter of a font that can be triggered in webflow. Something like this tool will let you upload your own svg as a letter for a font. https://glyphter.com


#6

@DFink you are a genius...this is awesome. I didn't even know this was possible. Thank you!

How do I manage to change the color on section/scroll though?


#7

Crap, i forgot you can't do that via interactions. Maybe do fixed logos of different colors in each section and make sure the section is set to overflow hidden?


#8

This topic was automatically closed after 60 days. New replies are no longer allowed.