A jQuery plugin for creating full-page overlays, blurring the content behind it. Check out the demo!
I’m not saying blur effects in user interfaces haven’t always been cool, but they really became popular when iOS 7 was released a few years ago. Proper use of blur can provide a “layering” effect, allowing content above the blur to pop without fully hiding the content beneath. On the web, the blur effect can be created using the
blur CSS filter.
At Constant Contact we wanted to use blur in a welcome overlay for new users. By using a soft blur and a fade-in transition, we can gently present the user some messaging without the feeling of being removed from the page they were on. The end result looks like this:
The blur-overlay in use over Constant Contact’s email editor
In order to make our dream design a reality, I wrote a jQuery plugin for creating these blurry overlays called
How It Works
One day CSS backdrop filters will be a thing, and content positioned behind DOM elements can be blurred. Until then, CSS filters can only be applied directly to DOM elements. So, the plugin creates a wrapper around existing DOM elements that will get blurred, and appends the overlay content to the DOM above the blurred wrapper. It looks kinda like this:
How To Use It
Assuming you have a page like this:
You can initialize a blur overlay like this:
You can show and hide the overlay using the
hide() methods. Both methods return a
$.Deferred that resolves when the fade in/out CSS transition completes:
You can also listen to events on the overlay:
For a complete example of the plugin’s options, methods, and events, see the demo page.
Unfortunately, as of this writing, the
blur filter isn’t without its bugs. Most notably,
fixed positioned elements can get moved around in Firefox when blurred, and they won’t be blurred at all in Edge. These problems don’t seem to affect Chrome or Safari.
To avoid these issues, you can listen to the plugin’s events to override an element’s CSS while the overlay is showing. Or you can use the
noFilter option on initialization to disable the blur for certain browsers, based perhaps on parsing a user agent string.
Subscribe via RSS