Animation of floating blocks (buttons)?

W

wwwkat20152020-05-17 12:07:17

JavaScript

wwwkat2015, 2020-05-17 12:07:17

There is such a block, with buttons (blocks) of different sizes, conditionally .

I need to make all these buttons fly in a block, I don’t know how to find JS for this.
Suggest some scripts.

Site on wordpress + elementor, but this block is likely to be written in code

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

W

wwwkat2015, 2020-05-17
@wwwkat2015

Decision:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Create a New Pen</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>

  <script>
    $(document).ready(function() {
  $('.balloon').each(animateDiv);
});

function makeNewPosition() {

  // Get viewport dimensions (remove the dimension of the div)
  var h = $(window).height() - 50;
  var w = $(window).width() - 50;

  var nh = Math.floor(Math.random() * h);
  var nw = Math.floor(Math.random() * w);

  return [nh, nw];

}

function animateDiv() {
  var el = $(this);
  var newq = makeNewPosition();
  var oldq = $(el).offset();
  var speed = calcSpeed([oldq.top, oldq.left], newq);

  $(el).animate({
    top: newq[0],
    left: newq[1]
  }, speed, function() {
    animateDiv.apply(this);
  });

};


function calcSpeed(prev, next) {

  var x = Math.abs(prev[1] - next[1]);
  var y = Math.abs(prev[0] - next[0]);

  var greatest = x > y ? x : y;

  var speedModifier = .04;

  var speed = Math.ceil(greatest / speedModifier);

  return speed;

}
    </script>
    
</head>

<body>
 <style>
     .balloon {
          width: 50px;
          height: 50px;
          background-color: red;
          position: fixed;
    }
    </style>
  <div class='balloon'></div>
  <div class='balloon'></div>
  <div class='balloon'></div>

  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>

</body>

</html>

A

Andrey Komyagin, 2020-05-17
@dekograph

Look here https://tympanus.net/codrops/category/tutorials/ maybe something will come across