title: Creating blur effect with css and jQuery on scroll
body: <p>I am trying to create blur effect when the user scrolls up and down the browser window using css and jquery. Here is my code.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="out"&gt;
      &lt;div class="inner"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="this-div-kills-browsers"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.out {
      width: 100%;
      height: 800px;
      background: url(https://placekitten.com/1200/800) no-repeat;
  }
  .this-div-kills-browsers {
      height: 1000px;
  }
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>var hideThatKitty = $('.out').innerHeight();
  
  $(window).on('scroll', function () {
       hideThatKitty = hideThatKitty/$('.this-div-kills-browsers').offset().top    
      $('.inner').css('background', rgba(255, 255, 255, \''0'+hideThatKitty\'));
  });
  </code></pre>
  
  <p><strong><a href="https://jsfiddle.net/2dmxLnuy/" rel="noreferrer">demo fiddle</a></strong></p>
  
  <p>What i am trying to do is increasing and decreasing the alpha value of css rule background:rgba() with jquery when the user scroll up and down, So it will get blurred with scrolling. Or is there another way of doing this? Please help me to achieve this. </p>