title: How to gradually resize an image while scrolling the page?
body: <p>I wonder how I can <strong>gradually</strong> resize an image while scrolling up/down the page.</p>
  
  <p>Please take a look at this example: <a href="https://jsfiddle.net/8anvra8j/" rel="nofollow">jsfiddle</a></p>
  
  <pre><code>.image {
    opacity: .7;
  }
  </code></pre>
  
  <p>I want the red heart to get smaller when scrolling down from the top of the page and bigger when scrolling upward. I'm gonna use this technique to have some fun with parallax on my website</p>
  
  <p>Thank you for your help!</p>