title: Images changing on scroll and fullPage.js
body: <p>I’m using fullPage.js(<a href="https://github.com/alvarotrigo/fullPage.js" rel="nofollow">https://github.com/alvarotrigo/fullPage.js</a>) and I need to have on the second section a scroll with images changing like a movie (Like this <a href="http://www.newjumoconcept.com/en/" rel="nofollow">http://www.newjumoconcept.com/en/</a>).</p>
  
  <p>I’ve added a class ‘sprites’ to the second section and stoped the fullPage scroll with: normalScrollElements: '.sprites', and the idea is to delete the class when the scroll event is finished so that fullPage continues the normal scroll to the next section.</p>
  
  <p>I’ve been reading similar questions about changing images on scroll but I can’t get it to work, and I have no idea of how to delete the class when the scroll is finished.</p>
  
  <p>That’s what I have:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;section id="second" class="section sprites"&gt;
      &lt;div id="sprites"&gt;&lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#sprites &gt; img:first-child {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  }
  #sprites &gt; img {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  position:absolute;
  width: 100%;
  height: 100%;
  }
  </code></pre>
  
  <p>js</p>
  
  <pre><code>jQuery(document).ready(function($){
      $('#fullpage').fullpage({
          ...
          normalScrollElements: '.sprites',
          ...
      });
      preload();
      $('#sprites').on('mousewheel', function(event, index) {
          switchImage();
      });
  });
  var pics = []; 
  function preload(){
      for(i = 1; i &lt; 23; i++) {
          pics[i] = new Image();
          pics[i].src = "i+".jpg"; 
          jQuery('#sprites').append('&lt;img class="sprite" src="' + pics[i].src +'"&gt;');
      }
  };
  function switchImage() {
      var s = jQuery(window).scrollTop()/10;
      var index = Math.floor(s/5);
      jQuery('.sprite').css('opacity','0');
      jQuery('.sprite').eq(index).css('opacity','1');
  }
  </code></pre>
  
  <p>And I'm using jQuery Mouse Wheel Plugin(Brandon Aaron).</p>
  
  <p>Can anyone help me out here?</p>