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!
Can we use this effect on background images?
nice script but I get the same error… ‘cannot access local image’. What does this mean ?
“Cannot access local image” – you can’t run the script locally. You need to run in on a server env.
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 ?
Javier: I was running the demo of this online when I get the error ‘cannot access local image’.
@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
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!
My automatic slideshow is not working when i modified this a little is shows last image in the background. Please help
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
Hello,
Well, same as up; cannot access local image too, even on a server
http://catherinearnould.sio4.net/autres/test2.html
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!
Is Background images support this Effects.???
Not working in Firefox – “Cannot access local image”
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!