title: animate opacity in and out on scroll
body: <p>So I have a set of elements called <code>.project-slide</code>, one after the other. Some of these will have the <code>.colour-change</code> class, IF they do have this class they will change the background colour of the <code>.background</code> element when they come into view. This is what I've got so far: <a href="https://codepen.io/neal_fletcher/pen/eGmmvJ" rel="nofollow noreferrer">https://codepen.io/neal_fletcher/pen/eGmmvJ</a></p>
  
  <p>But I'm looking to achieve something like this: <a href="http://studio.institute/clients/nike/" rel="nofollow noreferrer">http://studio.institute/clients/nike/</a></p>
  
  <p>Scroll through the page to see the background change. So in my case what I'd want is that when a <code>.colour-change</code> was coming into view it would slowly animate the opacity in of the <code>.background</code> element, then slowly animate the opacity out as I scroll past it (animating on scroll that is).</p>
  
  <p>Any suggestions on how I could achieve that would be greatly appreciated!</p>
  
  <p>HTML:
      
      </p>
  
  <pre><code>    &lt;div class="project-slide fullscreen"&gt;
          SLIDE ONE
      &lt;/div&gt;
  
      &lt;div class="project-slide fullscreen"&gt;
          SLIDE TWO
      &lt;/div&gt;
  
      &lt;div class="project-slide fullscreen colour-change" data-bg="#EA8D02"&gt;
          SLIDE THREE
      &lt;/div&gt;
  
  &lt;div class="project-slide fullscreen"&gt;
          SLIDE TWO
      &lt;/div&gt;
  
  &lt;div class="project-slide fullscreen colour-change" data-bg="#cccccc"&gt;
          SLIDE THREE
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(window).on('scroll', function () {
  
      $('.project-slide').each(function() {
  
          if ($(window).scrollTop() &gt;= $(this).offset().top - ($(window).height() / 2)) {
              if($(this).hasClass('colour-change')) {
                var bgCol = $(this).attr('data-bg');
  
                $('.background').css('background-color', bgCol);
  
              } else {
  
              }
          } else {
  
          }
  
      });
  
  }); 
  </code></pre>