title: Animated gif starting on scroll
body: <p>I have made 4 animated gifs and i want them to start by the user's scroll.</p>
  
  <p>What i did is use this: </p>
  
  <pre><code>$(function () {
      var screen = $(".screen");
      $(window).scroll(function () {
          var scroll = $(window).scrollTop();
  
          if (scroll &gt;= 1500) {
              screen.css('display','block');
          } else {
              screen.css('display','none');
          }
      });
  });
  </code></pre>
  
  <p>I tried to display none and block the gifs by scroll and it works good, the problem is that the gif doesnt start from the beginning when i display block it, it starts from somewhere in the middle of the animation. </p>
  
  <p>how can i make a gif start exactly from the first frame when i display block it?</p>
  
  <p>Thanks very much!</p>