title: Reactjs Howto Blur Background image on scroll?
body: <p>I'm new to reactjs and I would like understand how to reproduce this jquery example in Reactjs styled-components : Blurring background image on event "Scroll"
  <a href="https://jsfiddle.net/BinaryMoon/8jhw2/" rel="nofollow noreferrer">https://jsfiddle.net/BinaryMoon/8jhw2/</a></p>
  
  <pre><code>$(document).ready(function() {
      $(window).scroll(function(e) {
          var s = $(window).scrollTop(),
              opacityVal = (s / 200);
  
          $('.blurred-image').css('opacity', opacityVal);
      });
  });
  </code></pre>
  
  <pre><code>.img-src { 
      position: absolute;
      background:url(http://bromleydemo.files.wordpress.com/2013/10/blossom.jpg?w=600) center center;
      background-size: cover;
  }
  </code></pre>
  
  <p>as you've seen the background url is set into css prop
  I've tried something in reactjs but each time I scroll, the image background is reloaded. 
  Can somebody help me ? </p>
  
  <p>ps : If the solution can be implemented with styled-components it will be awesome</p>
  
  <p>ps2 : this is another page of the effect i'm trying to implement 
  <a href="https://codepen.io/zrichard/pen/wEFBd" rel="nofollow noreferrer">https://codepen.io/zrichard/pen/wEFBd</a></p>
  
  <p>Thank you </p>