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.
By in Playground on
FullscreenImageBlur
View demo Download Source

From our sponsor: Grow with Mailchimp's All-in-One Marketing Platform

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

UnderwaterMenu_featured

How to Build an Underwater-Style Navigation Using PixiJS

GridToFullscreen_featured

Creating Grid-to-Fullscreen Animations with Three.js

GridRevealEffects_featured

Grid Reveal Effects with Anime.js

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.

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

  4. 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 ?

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

  6. @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

  7. 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!

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

  9. 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

  11. 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!

  14. 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!

  15. 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.