Streaming live at 10am (PST)

Blur your site when opening a menu


#1

Now that we have CSS Filters, why not try something cool.

http://enterthearena.digitalsurgeons.com/the-game

^ open the menu on this site.


edit: actually, if you stare at it for a while, that whole page can be done within Webflow.


#2

Awesome, nice idea. Definitely going to try this out when i've got time


#4

Thats not webflow is it? You can't apply a filter to an interaction so we can't exactly do that yet, can we?


#5

yea. that site wasn't built in Webflow. also, your right. We don't have filters + interactions. but yes. that would be really cool.


#6

Actually I think we can create this... I think I have some spare time today :wink:


#7

Hi Guys, here's a first try out for this kind of animation;
http://blurred-out.webflow.io/

Needs fine tuning of course.


#8

:scream: amazing! Show us the ready only link! Please.


#9

This is a very rough setup obviously;
https://preview.webflow.com/preview/blurred-out?preview=eb53e46ab178b7446b5db369678f5b10

But with smart use of symbols you can create these kind of full page blurs.
I started with 100% height sections first, but I noticed the blur effect get's very buggy then, blurring partial sections and not-blurring things outside your view port.


#10

I finally went through your read-only link. OMG! You're so clever! You made the page content a symbol!


#11

yeah that's the trick i used!


#12