Streaming live at 10am (PST)

Background blur with vague.js


#1

Hello everyone! I’ve been wondering what’s the best way to create a popup with background blur. After some time I found the jquery plugin vague.js and it seems like a great way. My first step would be to just blur the html elements in the background, but I always receive an error:

“Uncaught TypeError: Cannot read property ‘style’ of undefined at Vague.blur”

Here is the public link: http://something-creative-website.webflow.io/projects
And the read-only: https://preview.webflow.com/preview/something-creative-website?preview=fec267e169dc84668d83dbd0ccf404a1

I tested it on a non-webflow site and it worked perfectly:
https://webflow.uber.space/

Thankful for any help!


#2

Why are you using external code for this? Is there any special purpose?

I’m asking to see if you need more detailed help or if pointing you to the native tools will help.


#4

Thanks a lot for answering!
While blurring an element is possible with css, toggling this effect isn’t.

However, it may be possible that vague.js isn’t the best way to do it. Do you know any other possibilities?
The effect I want to achieve is something like this: https://jsfiddle.net/aq9Laaew/171458/