Streaming live at 10am (PST)

Icon Filling Effect


#1

Trying to figure out how to achieve this effect in webflow: http://codyhouse.co/demo/icons-filling-effect/

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.


#2

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/


#3

This is the kinda of IX which should be creating with webflow. I hope the webflow team can draw inspiration from this. Nice contribution.


#4

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.


#5

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.


#6