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
    Commented 31 мая 2016 в 10:55
  • Есть похожий вопрос с решением, может быть будет полезно.ru.stackoverflow.com/questions/510729/…
    – Skywave
    Commented 31 мая 2016 в 11:00
  • @Alex Krass, я знал что будут проблемы с пониманием, потому я не могу и найти его сам. Тут есть пример блока в центре. Сделайте звук тише на всякий случай. Так хотелось бы что бы был похожий но более спокойный скрипт, этот нечто резкий. (могу выложить код скрипта сюда)
    – Telion
    Commented 31 мая 2016 в 11:01
  • @Skywave, интересная тема, но не то. Комментарий выше с примером.
    – Telion
    Commented 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
    Commented 31 мая 2016 в 12:42
  • Я полностью обновил вопрос, может так станет понятней.
    – Telion
    Commented 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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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