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

Animation of floating blocks (buttons)?

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

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

Answer the question

In order to leave comments, you need to log in

2 answer(s)
wwwkat2015, 2020-05-17


<!DOCTYPE html>

  <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'>

    $(document).ready(function() {

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);

    top: newq[0],
    left: newq[1]
  }, speed, function() {


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;


     .balloon {
          width: 50px;
          height: 50px;
          background-color: red;
          position: fixed;
  <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>



Andrey Komyagin, 2020-05-17

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

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question