Blurry Scroll

Medium style blur scroll

HTML

<div class="layout-foreground">
    <div id="blurred-image-container">
        <div class="img-src"></div>
        <div class="img-src blurred-image"></div>
    </div>
    <div class="content">
        <img class="avatar" src="https://pbs.twimg.com/profile_images/378800000748837969/bd8e553e5cae83ef488c6b15166bdd55.png"/>
        <p>This is some test content</p>
        <p>This is some test content</p>
        <p>This is some test content</p>
        <p>This is some test content</p>
        <p>This is some test content</p>
        <p>This is some test content</p>
        <p>This is some test content</p>
        <p>This is some test content</p>
        <p>This is some test content</p>
        <p>This is some test content</p>
        <p>This is some test content</p>
        <p>This is some test content</p>
        <p>This is some test content</p>
        <p>This is some test content</p>
        <p>This is some test content</p>
        <p>This is some test content</p>
        <p>This is some test content</p>
        <p>This is some test content</p>
        <p>This is some test content</p>
        <p>This is some test content</p>
        <p>This is some test content</p>
        <p>This is some test content</p>
        <p>This is some test content</p>
        <p>This is some test content</p>
        <p>This is some test content</p>
        <p>This is some test content</p>
        <p>This is some test content</p>
        <p>This is some test content</p>
        <p>This is some test content</p>
    </div>
</div>

CSS

body { margin: 0; padding: 0; }

#blurred-image-container {
    display:block;
    padding:0;
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:-1;
}

.img-src { 
    position: absolute;
    background:url(http://bromleydemo.files.wordpress.com/2013/10/blossom.jpg?w=600) center center;
    background-size: cover;
    top: -10%;
    bottom: 10%;
    left: -10%;
    right: 10%;
    width:120%;
    height:120%;
}

.img-src.blurred-image {
    opacity:0;
    -webkit-filter: blur(20px) brightness(0.7);
    -ms-filter: blur(20px) brightness(0.7);
    -o-filter: blur(20px) brightness(0.7);
    filter: blur(20px) brightness(0.7);
}

.content {
    padding:150px 50px;
    color:#fff;
    text-align:center;
}

.avatar {
    height: 120px;
    width: 120px;
    border-radius: 100%;
    border: 5px solid #fff;
    margin-bottom:50px;
}

JavaScript

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

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