Trying to figure out how to achieve this effect in webflow: Icons Filling Effect | CodyHouse
I understand in the article it says the color fill is placed underneath the icons and is fixed so that it follows while you scroll.
I just can’t seem to get it working in webflow, I have the transparent icons ready to go, but am unable to figure out how to get the color underneath to follow while I scroll. Any help would be appreciated.
I think it’s possible with several gradients at the bottom of the screen
— though… admittingly - I haven’t had the time to try it out.
If I get a open time slot… I may try to put a demo together.
Can I get a copy of the icons you were referring to ?
That way… it saves me time making them.
The site with the demo… has other interesting demos as well…
http://codyhouse.co/demo/
This is the kinda of IX which should be creating with webflow. I hope the webflow team can draw inspiration from this. Nice contribution.
I would probably use a fixed div or section with a default z-index. The top layer of content with the icons would be placed in a relative aligned page wrapper div / section with a higher z-index.
The example uses a negative z-index for the color fill div / section which will give you the same effect with normal content on top, but a negative z-index can cause some unexpected pain if it contains anything with interactions, components, etc. so it limits things a bit if you decide to go further with the layout or interactions.
It is a great and very simple effect.
http://codyhouse.co/demo/icons-filling-effect/img/cd-icon-2-large.svg
Look at the image. It’s just a plain image with cut-off lines behind it. I would recommend to simply put a div block of some color beneath it that will be 50% of the browser height. Once you scroll down it will appear in those “lines”. If you hit the certain place on website, you can use javascript to change the background color.