How To Add The Blur Effect On Scroll

by | Jul 2, 2015 | General, Tips

I love the blur effect that is taking over the internet when you scroll. It takes your focus off the image as you scroll down the page. I investigated how to do this and found it was actually quite easy to implement, especially using the WordPress theme DIVI by Elegant Themes.

To create this effect do the steps as follows:

  1. Add a fullwidth section.
  2. Name this section “image-wrap” in the class section.
  3. Add a fullwidth header.
  4. Add a background image.
  5. Name this section “regular” in the class section.
  6. Add another fullwidth header.
  7. Using the same image you add a Gaussian Blur in photoshop. Add this photo as the background.
  8. Name this section “blurred” in the class section.
  9. Add the following to your CSS.
/* Blur Effect */
.image-wrap {
position:relative;
height:800px;
overflow:hidden
}
.regular, .blurred {
position:absolute;
width:100%;
min-height: 800px;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

.regular {opacity:1;}
.blurred {opacity:0;}

There are some issues when you reach the top, where the blurred image does not go back to the full opacity. This does not effect sections when they are further down the page.

View the demo here. Enjoy.