1

Я делал ранее скрипт для передвижения одного блока в разные стороны. Чисто для красоты. У него есть центр передвижения и радиус, дальше которого он не выходит(не может выйти за пределы экрана). Каждую секунду происходит очередное изменение отступа. В центре экрана блок удерживает table. Скрипт выглядит так:

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

Теперь у меня есть скрипт, который генерирует 200 div, каждый имеет свой класс, текст и position: relative;. Скрипт генерирует каждому блоку отступы margin-left, margin-right случайным образом, что бы распределить их по всему экрану хаотично.

Задача: нужно сделать скрипт как выше, только что бы каждый элемент индивидуально двигался в стороны в разные промежутки времени, в зависимости от размера его текста(font-size тоже генерируется скриптом).

Если кому действительно интересно для чего это, вот скриншот.

4
  • Не очень понятно, что Вы имеете ввиду под двигать в стороны в окружности. Может быть вы имеете ввиду sphere tag cloud?
    – Alex Krass
    31 мая 2016 в 10:55
  • Есть похожий вопрос с решением, может быть будет полезно.ru.stackoverflow.com/questions/510729/…
    – Skywave
    31 мая 2016 в 11:00
  • @Alex Krass, я знал что будут проблемы с пониманием, потому я не могу и найти его сам. Тут есть пример блока в центре. Сделайте звук тише на всякий случай. Так хотелось бы что бы был похожий но более спокойный скрипт, этот нечто резкий. (могу выложить код скрипта сюда)
    – Telion
    31 мая 2016 в 11:01
  • @Skywave, интересная тема, но не то. Комментарий выше с примером.
    – Telion
    31 мая 2016 в 11:02

2 ответа 2

3

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>

2
  • Вы не совсем поняли. Точнее я не объяснил. Блоки расположены хаотично по всему вьюпорту. У каждого задан рандомный margin-left, margin-top процентно. Если применить ваш скрипт ко всем элементам то есть как минимум 2 проблемы: 1) центр их передвижения изменяется и они могут уйти куда-то за пределы экрана в итоге. 2) все 200 объектов передвигаются одновременно в одни и те же стороны, а предполагается что анимация индивидуальная и уникальная для каждого.
    – Telion
    31 мая 2016 в 12:42
  • Я полностью обновил вопрос, может так станет понятней.
    – Telion
    31 мая 2016 в 12:54
2

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.