mercredi 5 octobre 2016

Tracking random div across page

Trying to move my div randomly around page. Currently new randomly generated div appears on new location on page as opposed to transitioning to new position (I want div to track across page instead of deleting itself and reappearing).

function randomdiv1 () {
  var divnum = $('.random').length;
  var random = $('.random');
  var startleft =random.css('left', (Math.floor(Math.random() * ($(window).width()-50))));
  var starttop =random.css('top', (Math.floor(Math.random() * ($(window).height()-50))));
  return [startleft, starttop];
}

function randomdiv2 () {
  var divnum = $('.random').length;
  var random = $('.random');
  var endleft =random.css('left', (Math.floor(Math.random() * ($(window).width()-50))));
  var endtop =random.css('top', (Math.floor(Math.random() * ($(window).height()-50))));
  return [endleft, endtop];
}

function randomdiv3 () {
  var startdiv = randomdiv1 ();
  var enddiv = randomdiv2 ();
  $('.random').animate({
    top: enddiv[1],
    left: enddiv[0],
    }, 2000, 'swing', randomdiv3);
 }

 randomdiv3 ();
.random {
  width: 50px;
  height: 50px;
  background-color: blue;
  position: absolute;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="style.css">
  <script src="http://ift.tt/2a1Bldc"></script>
  <script src="script.js"></script>
</head>
<body>
  <div class="random"></div>
</body>
</html>



Aucun commentaire:

Enregistrer un commentaire