title: Change image on scroll
body: <p>On my website is a fixed image. This image should be "animated", meaning that the single frames of the animation should be iterated. So the idea is to have an array of images and that every time the user scrolls, the array is iterated and the displayed image changes, thus creating an animation.
  I'm not that accustomed to using JS, thus I don't really know where to start.
  The only thing I have is the CSS:</p>
  
  <pre><code>#animation { 
  background-repeat: no-repeat;
  position : fixed; 
  width: 980px;
  margin: 0 auto;
  }
  </code></pre>