The amazing team at Medium shipped 1.0 today and amongst the plethora of new features was a very delightful and subtle user experience. I call it the “blurry scroll”. The page wide header at the top of a profile will blur as the page is scrolled down.

This effect can be achieved quite easily, let’s walk through recreating the magic!

We’ll start off with the markup, look at the HTML below. There will be two images, one for the original image and another image that is blurred out.

<div id="blurred-image-container">
    <div class="img-src" style="background-image:url('original.jpeg')"></div>
    <div class="img-src" style="background-image:url('blurred.jpeg')"></div>
</div>

The blurred image can be generated using ImageMagick, the below shell script sets the blur sigma spread value to 50 with 0 blur radius, and sets the brightness to be a tad dimmer.

convert original.jpeg -blur 0x50 -brightness-contrast -30 blurred.jpeg

Now we have our two images, we will set the initial state of the blurred image to be invisible (opacity:0) and composit them by setting position:absolute on the .img-src elements. We want the background image to spread across the screen and be centered, below is the CSS to get us to where we’re going.

.img-src {
    position: absolute;
    background-position: center;
    -webkit-background-size: cover;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.img-src.blurred-img {
  opacity: 0;
}

We now want to show the blurred image as the user scrolls down, we will attach to the scroll event on the window and set the opacity to go from 0.0 to 1.0 on the interval 0, 150px.

$(window).scroll(function(e) {
    var s = $(window).scrollTop(),
        opacityVal = (s / 150.0);

    $('.blurred-image').css('opacity', opacityVal);
});

We’re done! Yep, it was really that easy. Scroll down and watch the blurry image come into focus.

To bring everything we just went over together, check out this JSFiddle.