Animate the images while scrolling
<p>I am using animate.css from <a href="http://daneden.me/animate" rel="nofollow">http://daneden.me/animate</a></p>

<p>I want to animate the images while scrolling down and when the image gets focused. I am adding the class .animated in  tag and the type of animation in data-animate attribute like the below:</p>

<p>HTML</p>

<pre><code>&lt;img src="images/img-grow.png" alt="Grow" class="img-responsive animated" data-animate="bounceInRight"&gt;
</code></pre>

<p>When the image gets focused during scroll down it should add data-animate attribute i.e bounceInRight to the class so that that animation will take place.</p>

<p>It can be bounceInRight or bounceInLeft or any other animation tag as in animate.css</p>

<p>JS</p>

<pre><code>$(document).ready(function () {

  if ($(".animated").focus() ) {
      var elementAnimation = $(this).attr('data-animate');
       $(this).addClass( elementAnimation );
   }
});
</code></pre>

<p>But above code is not working. Any help?</p>

<p>Also it is better to have the animation take place once only per page refresh.</p>