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

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:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

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

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

  7. “Cannot access local image” – you can’t run the script locally. You need to run in on a server env.

  8. I get the message on firefox when I run the script from a server. I have to press OK like 14 times to access the site.
    although the demo seems OK on codrops.

    maybe I deleted something important ?

  9. Javier: I was running the demo of this online when I get the error ‘cannot access local image’.

  10. @CHACKMOOL I added a third demo with the autoplay slideshow.
    @DAVDUF @Jaime you can insert your content inside the div with class “bx-content” .
    Cheers, ML

  11. Dear Mary Lou,

    Thank you so much but what i should love to do is a diffrent text/content for each different… Background image, just like we can do the titles…

    Thank you so much again!

  12. My automatic slideshow is not working when i modified this a little is shows last image in the background. Please help

  13. Great script! Just what I was looking for a project. But i tried to make it stop and I couldn’t.. it’s too complex for me. Even the variable BlurBGImage isn’t visible to console. Just needed to make it stop to save processing when showing processor-consuming things on top of background.. and maybe trigger the blurring when stopped.. can anyone help me with this?

    thanks,
    Alan

  14. Mary Lou,
    is there any way to add some indivdual html content for every image? If I add another .bx-content it is the same for all images. But I need separate content for every image.
    Thanks!

  15. Thanks for this great script! I love and I have been using it on my portfolio website. One thing though, I use the version with the slideshow function where it automatically displays the images. But I can’t figure out how to stop the slideshow as soon as I click on a button. Can somebody help me with this? Thanks!

  16. Wonderful.
    But, I encountered a problems.
    I viewed the demo in Chrome and it behaved well.
    I downloaded the file and then when I tried to access it with Chrome I got the answer “Cannot access local Image”.
    I tried with FF and it behaved well.
    Above a few commentators had mentioned they are experiencing issues in FF but in my case FF is behaving but Chrome is not.
    I have the latest version of Chrome.
    The utility is wonderful.
    Thanks.

  17. Hey Mary Lou
    Thanks so much, for this creative solution.
    I got just a little problem: In your demos as well, during the blurred transitions, a black box appears in the lower left corner. It depends on the viewport dimensions. Have you noticed this as well? Could you just give a quick hint, where this comes from? I can’t figure out, why this box appears.

    Thank you very much.

  18. Hi, ML! I’m doing an experimental page and I would love to do something with this effect. But all I want is to blur on hover and not change the image. I’ve managed to trigger on hover, but stop the animation on the blur was too much for me. Can you enlighten me on that one?

  19. Although it could be my monitor, but the background/blurring gives a fantastic impression of a special kind of plastic surface I’ve seen somewhere. Dunno if anyone can see it this way, but think about a photo printed on a rough or densly striped plastic surface. Very nice this.