title: Data-delay function for a website
body: <p>I have been struggling with this for some time now.</p>
  
  <p>Basically I have a website and I will show some images and I want them to animate one by one. 
  I have added the <a href="http://daneden.github.io/animate.css/" rel="nofollow">animate.css</a> I found on internet and added to my website.</p>
  
  <p>This is my HTML:</p>
  
  <pre><code>&lt;!-- START Column 1 --&gt;
          &lt;div class="one-third column"&gt;
              &lt;div class="img-wrp animated rotateIn" data-delay="100"&gt;
                  &lt;a href="#"&gt; &lt;img alt="" class="scaleimg" src="images/photo.jpg" /&gt; &lt;/a&gt;
                  &lt;div class="overlay-wrp"&gt;
                      &lt;div class="overlay"&gt; &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;h3&gt; Title 1&lt;/h3&gt;
            &lt;p class="job position"&gt;Podnaslov &lt;/p&gt;
              &lt;p class="description"&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non leo nec enim ultricies convallis. Quisque tempus, lorem in rutrum vulputate, elit justo placerat neque, sed iaculis diam nisl vel sapien. Donec facilisis in lectus non adipiscing. Sed molestie scelerisque. &lt;/p&gt;
          &lt;/div&gt;
          &lt;!--END Column 1 --&gt;
  
  
          &lt;!-- START Column 2 --&gt;
          &lt;div class="one-third column"&gt;
              &lt;div class="img-wrp animated rotateIn" data-delay="500"&gt;
                  &lt;a href="#"&gt; &lt;img alt="" class="scaleimg" src="images/photo.jpg" /&gt; &lt;/a&gt;
                  &lt;div class="overlay-wrp"&gt;
                      &lt;div class="overlay"&gt; &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;h3&gt; Title 2&lt;/h3&gt;
            &lt;p class="job position"&gt;Podnaslov &lt;/p&gt;
              &lt;p class="description"&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non leo nec enim ultricies convallis. Quisque tempus, lorem in rutrum vulputate, elit justo placerat neque, sed iaculis diam nisl vel sapien. Donec facilisis in lectus non adipiscing. Sed molestie scelerisque. &lt;/p&gt;
          &lt;/div&gt;
          &lt;!--END Column 2 --&gt;
  </code></pre>
  
  <p>What I want to achieve is to animate images one by one, for example first one shows after one second, second one after 2 seconds and so on. I'm not so good with .js so if anyone could help me with this.</p>
  
  <p>And how can I make it as I scroll down images appear, but not before someone scrolls down to that part of web page?</p>
  
  <p>Thanks a lot!
  Cheers!</p>