19 Nov 2014
How Pixelapse image blurring works
The last deconstruction about the Facebook content placeholder seemed to be popular so here’s my next one. I recently discovered a fantastic start up called Pixelapse and the level of polish on their site was outstanding. Today I am doing a deconstruction on something I found there.
What is it?
As I roamed through the great community designs I noticed the cover images blurred as I scrolled. I immediately thought that they were dynamically blurring images with a canvas but my browser wasn’t getting crippled. So I took a look and the result was very pleasing. Here’s my clone:
Just two divs with background images, that’s amazing and explains the why the performance was so good. I got this one from Pexels which doesn’t need attribution but I think they deserve it.
A Nice Crisp Image
This is the image you want to use, just as you want to show it normally with no blurring. You will be overlaying this over the next image. Here’s my one:
A Small Blurred Image
This is the same image as the one above only I have blurred it. This image will be sitting behind the crisp version and will never change.
Instead of dynamically blurring the image, all it’s doing is fading the crisp image in and out. Here’s the logic for scrolling:
To demonstrate the the same effect, Below is a pure CSS implementation using the hover state and some nice CSS transitions (try hovering). I reversed the effect so the default is the crisp image, added a glow and added a greeting.
Why would I ever use this?
This is a great way for setting the focus on the hovered element and one that people will remember. The other way I would use this same effect is so that I can load the blurred version with a lower resolution then preload the larger crisp image over the top. The user doesn’t necessarily suffer as the image is loading and can still use the site as it loads.
This was a clever way to polish the UI without impacting on the performance of the page. This fits the tune of the rest of Pixelapse which is beautifully polished. Definitely worth checking out for the idea and the designs. If you found this useful or have any questions feel free to comment below.
Note: I used unprefixed CSS in the code examples to keep it clean. You can use Our CSS Prefixer to get cross a cross browser version.