Fullscreen Image Blur Effect with HTML5

Today we want to share a neat image blur effect with you. Using canvas, we want to blur images on the transition to another one, creating a smooth effect.
FullscreenImageBlur

From our sponsor: Design every part of your website with the Divi Theme Builder.

Today we want to share a neat image blur effect with you. Using canvas, we want to blur images on the transition to another one, creating a smooth effect.

We will be using Stack Blur, which is a fast, almost Gaussian blur for Canvas by Mario Klingemann from Quasimondo.

The images used in the demo are by Geoff Peters. They are licensed under the Attribution 2.0 Generic (CC BY 2.0) License.

How it works

The main idea is to add some images in our structure that will serve as background images. We will add the canvas element which will contain a blurred version of the image. When we navigate, we’ll add the blurred canvas behind the current image and fade the current image out. With the blurred canvas image now visible, we can either show the new image immediately (unblurred) or show it blurred and then “sharpen” it.

You can set that by changing the variation between 1 and 2:

animOptions			= { speed : 700, variation : 1, blurFactor : 10 }

The speed is the animation speed between each transition (from normal to blurred) and the blurFactor is basically the radius for the blur effect used in Stack Blur.

Demos

  • Demo 1: Here we use variation 2, showing the coming image without blurring it first.
  • Demo 2: In this demo we use variation 1 for blurring both, the current image and the coming one.

We hope you liked our little experiment and find it inspiring and useful!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 40

Comments are closed.
  1. Looks great….!!

    it would be very nice if you can provide jquery alternative of the same so that it will support in browsers in which html5 wont work….

  2. Nice effect, I really like it – but, by the way: Advertisement in demos is something new and disturbing in my opinion … 🙁

  3. Hi I am a professional photographer and was interested in the blur effect for a couple of ideas I have. Under Safari it looks more like a fade than a blur to sharp effect or am I missing something?

  4. Hey look, it’s something you can make in 2 minutes in flash. But this is innovative because… It’s not flash. It’s sad to see interactive design regress ten years

  5. Waouh! Great! Thank you son much.

    Dear May Lou, one thing: how and where can we put more text. I mean not only titles of the images (ie: Flavour Bomb, Crunchbitesm etc) but some more text, under the titles with another style…

    I guess it’s about the bx-container but not sure.

    Thank you so much!

  6. As Davifdu says…

    Please Mary Lou…

    Could you tell us how to put more text, morever titles of the images (ie: Flavour Bomb, Crunchbitesm etc)?

    It should be very nice from you.

    Our best,
    Jaime