Moving blocks

Question

I previously did a script for moving one block in different directions. Purely for beauty. It has a center of movement and a radius beyond which it does not go out (it cannot go beyond the limits of the screen). Every second, another indent change occurs. In the center of the screen, the block holds the table . The script looks like this:

 l=0; setInterval(function() { x=$(document).height()/8; y=$(document).width()/8; $(function () { $("#tm").animate({ marginTop: Math.floor(Math.random()*(x+x)-x), marginLeft: Math.floor(Math.random()*(y+y)-y) }, { duration: 1000, queue: false }); });}, 1000);

Now I have a script that generates 200 divs, each has its own class, text, and position: relative; . The script generates margin-left, margin-right margins for each block in a random way to distribute them across the screen randomly.

Task: you need to make the script as above, just so that each element individually moves to the sides at different intervals, depending on the size of its text (the font-size is also generated by the script).

If anyone is really interested in what it is, here is a screenshot .

It is not very clear what you mean by moving sideways in a circle.
There is a similar issue with the decision, it may be useful.
@Alex Krass, I knew that there would be problems with understanding, because I cannot find it myself.
So I would like to have a similar but calmer script, this something sharp.

sepgg sepgg 2.387 6 20 · Accepted Answer · 2016-05-31T15:59:10

 var w = $(document).width(); var h = $(document).height(); $('.test').each(function(i, v) { var size = parseInt(Math.random() * 20 + 14); var offsetX = parseInt(Math.random() * (w - $(this).width() - 40) + 20); var offsetY = parseInt(Math.random() * (h - size * 2) + size); $(this).attr('data-top', offsetY); $(this).attr('data-left', offsetX); $(v).css({ 'font-size': size + 'px', 'margin-top': offsetY + 'px', 'margin-left': offsetX + 'px' }); }) setInterval(function() { $('.test').each(function() { var size = $(this).css('font-size').replace('px', ''); var top = parseInt($(this).data('top')) + parseInt(Math.random() * size - size / 2) + 'px'; var left = parseInt($(this).data('left')) + parseInt(Math.random() * size - size / 2) + 'px'; $(this).animate({ 'margin-top': top, 'margin-left': left }, 1000); }); }, 1000);

 .test { position: absolute; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="test">Lorem.</div> <div class="test">Ad.</div> <div class="test">Minima.</div> <div class="test">Nobis.</div> <div class="test">Earum.</div> <div class="test">Quia.</div> <div class="test">Qui.</div> <div class="test">Nisi!</div> <div class="test">Ipsum.</div> <div class="test">Dignissimos!</div> <div class="test">Facere.</div> <div class="test">Ipsam!</div> <div class="test">Pariatur.</div> <div class="test">Qui.</div> <div class="test">Ad!</div> <div class="test">Est.</div> <div class="test">Eveniet?</div> <div class="test">Numquam?</div> <div class="test">Veritatis.</div> <div class="test">Sequi!</div> <div class="test">Nisi!</div> <div class="test">Eius.</div> <div class="test">Esse.</div> <div class="test">Et?</div> <div class="test">Placeat.</div> <div class="test">Eveniet!</div> <div class="test">Quas!</div> <div class="test">Fugiat.</div> <div class="test">Numquam.</div> <div class="test">Quos!</div> <div class="test">Dolore.</div> <div class="test">Laborum.</div> <div class="test">Tempora!</div> <div class="test">Enim.</div> <div class="test">Labore.</div> <div class="test">Unde?</div> <div class="test">Nihil.</div> <div class="test">Adipisci.</div> <div class="test">Blanditiis.</div> <div class="test">Porro.</div> <div class="test">Magni?</div> <div class="test">Iure!</div> <div class="test">Iste!</div> <div class="test">Ullam!</div> <div class="test">Optio.</div> <div class="test">Similique.</div> <div class="test">Nobis.</div> <div class="test">Accusamus!</div> <div class="test">Cupiditate!</div> <div class="test">Vero.</div> <div class="test">Dolorem.</div> <div class="test">Nemo!</div> <div class="test">Dolore?</div> <div class="test">Quam.</div> <div class="test">Itaque.</div> <div class="test">Nemo.</div> <div class="test">Veniam.</div> <div class="test">Molestiae.</div> <div class="test">Provident.</div> <div class="test">Quod.</div> <div class="test">Odio.</div> <div class="test">Delectus!</div> <div class="test">Eum.</div> <div class="test">Praesentium.</div> <div class="test">Optio!</div> <div class="test">Assumenda?</div> <div class="test">Dolores.</div> <div class="test">Tenetur.</div> <div class="test">Quo.</div> <div class="test">Sapiente.</div> <div class="test">Illum!</div> <div class="test">Expedita.</div> <div class="test">Quae!</div> <div class="test">Culpa.</div> <div class="test">Ipsa.</div> <div class="test">Ducimus!</div> <div class="test">Magni.</div> <div class="test">Voluptates.</div> <div class="test">Assumenda!</div> <div class="test">Saepe.</div> <div class="test">Officia.</div> <div class="test">Reiciendis!</div> <div class="test">Dolorum.</div> <div class="test">Cum!</div> <div class="test">Minus.</div> <div class="test">Nobis.</div> <div class="test">Doloribus!</div> <div class="test">Esse?</div> <div class="test">Fugiat.</div> <div class="test">Tempore.</div> <div class="test">Facere.</div> <div class="test">Quisquam.</div> <div class="test">Adipisci.</div> <div class="test">Veritatis.</div> <div class="test">Tenetur!</div> <div class="test">Explicabo!</div> <div class="test">At.</div> <div class="test">Ipsam?</div> <div class="test">Ducimus?</div> <div class="test">Pariatur.</div> <div class="test">Vitae.</div> <div class="test">Minima!</div> <div class="test">Incidunt?</div> <div class="test">Fugit?</div> <div class="test">Aliquid.</div> <div class="test">Vitae.</div> <div class="test">Aliquid.</div> <div class="test">Quidem.</div> <div class="test">Blanditiis!</div> <div class="test">Error.</div> <div class="test">Voluptates.</div> <div class="test">Facilis?</div> <div class="test">Reprehenderit.</div> <div class="test">Veritatis!</div> <div class="test">In.</div> <div class="test">Accusantium.</div> <div class="test">Reprehenderit.</div> <div class="test">Iure!</div> <div class="test">Incidunt!</div> <div class="test">Pariatur.</div> <div class="test">Est.</div> <div class="test">Consequuntur.</div> <div class="test">Sequi.</div> <div class="test">Dicta.</div> <div class="test">Sit.</div> <div class="test">Vitae.</div> <div class="test">Qui.</div> <div class="test">Provident.</div> <div class="test">Nihil.</div> <div class="test">Consectetur.</div> <div class="test">Mollitia?</div> <div class="test">Ullam!</div> <div class="test">Ab.</div> <div class="test">Quibusdam.</div> <div class="test">In.</div> <div class="test">Inventore!</div> <div class="test">Ea?</div> <div class="test">Cum.</div> <div class="test">Neque.</div> <div class="test">Distinctio.</div> <div class="test">Cum!</div> <div class="test">Voluptate!</div> <div class="test">Iste!</div> <div class="test">Nobis.</div> <div class="test">Temporibus?</div> <div class="test">Vel.</div> <div class="test">Accusamus.</div> <div class="test">Molestias.</div> <div class="test">Quod.</div> <div class="test">Nostrum.</div> <div class="test">Earum.</div> <div class="test">Alias.</div> <div class="test">Ipsum.</div> <div class="test">Eum!</div> <div class="test">Esse.</div> <div class="test">Sit?</div> <div class="test">Repellendus!</div> <div class="test">Exercitationem.</div> <div class="test">Eveniet.</div> <div class="test">Tempora?</div> <div class="test">Hic.</div> <div class="test">Nostrum.</div> <div class="test">Accusantium.</div> <div class="test">Voluptatem!</div> <div class="test">Debitis!</div> <div class="test">Veniam.</div> <div class="test">Ea.</div> <div class="test">Unde.</div> <div class="test">Velit!</div> <div class="test">Officiis?</div> <div class="test">Harum!</div> <div class="test">Iste!</div> <div class="test">Provident!</div> <div class="test">Error?</div> <div class="test">Culpa!</div> <div class="test">Nemo?</div> <div class="test">Ea!</div> <div class="test">Eveniet.</div> <div class="test">Praesentium.</div> <div class="test">Error.</div> <div class="test">Rem.</div> <div class="test">Dolorem.</div> <div class="test">Quia.</div> <div class="test">Ut.</div> <div class="test">Accusamus.</div> <div class="test">Eligendi.</div> <div class="test">Deserunt.</div> <div class="test">Expedita!</div> <div class="test">Tempore.</div> <div class="test">Minus.</div> <div class="test">Nulla.</div> <div class="test">Sapiente.</div> <div class="test">Officia.</div> <div class="test">Nulla.</div> <div class="test">Eligendi.</div> <div class="test">Obcaecati!</div> <div class="test">Enim?</div> <div class="test">Saepe!</div> <div class="test">Minima.</div> <div class="test">Eligendi.</div>

sepgg sepgg 2.387 6 20 · Answer 2 · 2016-05-31T11:39:13

 setInterval(function() { $('#d1').animate({ top: 40 + Math.random() * 60 - 30, left: 40 + Math.random() * 60 - 30 }, 900) $('#d2').animate({ top: 40 + Math.random() * 60 - 30, left: 200 + Math.random() * 60 - 30 }, 800) }, 1000);

 .d { width: 100px; height: 100px; border: 2px solid red; position: absolute; } #d1 { top: 40px; left: 40px } #d2 { top: 40px; left: 200px }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='d' id="d1"></div> <div class='d' id="d2"></div>

If you apply your script to all elements, that is, at least 2 problems: 1) their center of movement changes and they can go somewhere off the screen in the end.
2) all 200 objects move simultaneously in the same directions, and it is assumed that the animation is individual and unique for each.
I completely updated the question, maybe it will become so clearer.

Moving blocks

2 answers 2

More articles: