title: Add class only for the element in view
body: <p>I was looking for something like the affect of <a href="http://www.elegantthemes.com/demo/?theme=Divi" rel="nofollow">this page</a> (I'm looking for the trigger that start the animations with the scroll of the page)</p>
  
  <p>Some people help me here in StackOverFlow with this code:</p>
  
  <pre><code>function isScrolledIntoView(elem) {
      var docViewTop = $(window).scrollTop();
      var docViewBottom = docViewTop + $(window).height();
  
      var elemTop = $(elem).offset().top;
      var elemBottom = elemTop + $(elem).height();
  
      return ((elemBottom &lt;= docViewBottom) &amp;&amp; (elemTop &gt;= docViewTop));
  }
  
  $(window).scroll(function(){
  
      if (isScrolledIntoView('.class') === true) {
          $('.class').addClass('in-view')
      }
  });
  </code></pre>
  
  <p>The result can be found here: <a href="http://jsfiddle.net/z3xTU/" rel="nofollow">http://jsfiddle.net/z3xTU/</a></p>
  
  <p>But now I got another problem. I have a page with several DIVs, I want to animate all of them, but if I set every with ".class", this code add the "in-view" for all of they, at the same time. This trigger all the animation to start when the first div come to view, isn't what I'm looking for.</p>
  
  <p>Anyone have a better idea that can help me?</p>