mardi 4 juillet 2017

How to fade in - fade out three images with random place and random size?

I want to place a div which fade in/out randomly with random size and random place.

I could show up three images randomly with fade-in/out but I couldn't place them in a random place with a random size. Thanks for your help.

JSFiddle

HTML

<div id="block">
  <img src="http://ift.tt/2tlBo9o">
  <img src="http://ift.tt/2sBhTfO">
  <img src="http://ift.tt/2tljpQp">
</div>

JS

jQuery(function() {
  function random(n) {
    return Math.floor(Math.random() * n);
  }
  var transition_time = 2500;
  var waiting_time = 100;
  var images = $('div#block img');
  var n = images.length;
  var current = random(n);
  images.hide();
  images.eq(current).show();

  var interval_id = setInterval(function() {
    images.eq(current).fadeOut(transition_time, function() {
      current = random(n);
      images.eq(current).fadeIn(transition_time);
    });
  }, 2 * transition_time + waiting_time);
})




Aucun commentaire:

Enregistrer un commentaire