Data-delay function for a website

Question

I have been struggling with this for some time now.

Basically I have a website and I will show some images and I want them to animate one by one. I have added the animate.css I found on internet and added to my website.

This is my HTML:

<!-- START Column 1 -->
        <div class="one-third column">
            <div class="img-wrp animated rotateIn" data-delay="100">
                <a href="#"> <img alt="" class="scaleimg" src="images/photo.jpg" /> </a>
                <div class="overlay-wrp">
                    <div class="overlay"> </div>
                </div>
            </div>
            <h3> Title 1</h3>
          <p class="job position">Podnaslov </p>
            <p class="description"> 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. </p>
        </div>
        <!--END Column 1 -->


        <!-- START Column 2 -->
        <div class="one-third column">
            <div class="img-wrp animated rotateIn" data-delay="500">
                <a href="#"> <img alt="" class="scaleimg" src="images/photo.jpg" /> </a>
                <div class="overlay-wrp">
                    <div class="overlay"> </div>
                </div>
            </div>
            <h3> Title 2</h3>
          <p class="job position">Podnaslov </p>
            <p class="description"> 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. </p>
        </div>
        <!--END Column 2 -->

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.

And how can I make it as I scroll down images appear, but not before someone scrolls down to that part of web page?

Thanks a lot! Cheers!

Are you looking for something similar to this? http://www.appelsiini.net/projects/lazyload It's called a lazy load and it enables the ability to load one photo at a time as you scroll down... it's quite simple. — BuddhistBeast, Jun 10 '14 at 21:35
Thanks a lot BuddhistBeast, this is the one I've been looking for. :) — user3727784, Jun 10 '14 at 21:39
But I still need the one where images show up with delay without scrolling, is this also possible with this plugin? — user3727784, Jun 10 '14 at 21:40
just got the time to try it and it did help. Thanks a lot :) — user3727784, Jun 12 '14 at 17:28

score 0 · Accepted Answer · edited May 23 '17 at 12:05

I found a fiddle online that showed a good example of what you wanted. I updated it and changed a few things, that can be found below.

The key to all of this is the following code:

  $(function() {
      $("img").lazyload({
          effect : "fadeIn",
          effectspeed: 10000 
      });
  });

All this does is set a 10 second delay for the user to view the photo... Honestly, you don't need it to be that long but you can always play with it. You also need to make sure you follow the instructions completely in order to use the lazy load plugin that I had mentioned in the comments above.

Side Note:

You can find a few helpful hints here or here (just Google Lazy Load).

JSFIDDLE

Data-delay function for a website

1 Answers1