How to blur image on scroll?

Yo guys im currently developing this site its almost done , but im currently simulating a blur effect with 2 images and with opacity, so the user will think the image is blurring when you are scrolling. But i dont think the effect is good enough,and the CSS3 blur will totally slow the website.

This is what i tried so far.. oh and by the way im using scrollorama for this.

HTML

<div id="imgprinc1" data-0="top:0%" data-2200="top:-5%"></div>
<div id="imgprinc2" data-0="top:0%" data-2200="top:-5%"></div>

Imgprinc1 is the normal image and the next one is the blurred image.

JS

scrollorama.animate('#imgprinc1',{delay:200,duration: 600, property:"opacity" , start:1 , end: 0});
scrollorama.animate('#imgprinc2',{delay:1800,duration: 500, property:"opacity" , start:1 , end: 0});

Here's an idea-

Use vague.js. Its open source and has great documentation.

Use this code example: https://codepen.io/GianlucaGuarini/pen/DwdzEo

However, change their example from a button that is clicked to change blur:

$(".btn").on("click",$.proxy(vague.toggleblur,vague));

to a jquery window scroll listener so that when users scroll the image gets blurred and when scrolling stops it clears up again (or however you want to do it). Here is a rough idea:

$(document).ready(function(){
    $(window).scroll(function(){
        $.proxy(vague.toggleblur,vague);
    })
})