- PVSM.RU - https://www.pvsm.ru -
Х*ли там игры, подумал я, и давай строчить в рекавери мод. Писать будем на jQuery, да, смысл 30 строк нивелируется, зато я офигенненько так примажусь к общей феерии и срублю халявной кармы (как бы ни так, подумал читатель и смачно щелкнув мышей минусанул, да и п**уй подумал я и продолжил бредить). Статья рассчитана на новичканов, поэтому уважаемые знатоки могут сразу скроллить.
Нам нужна функция, которая бы совершала цикличную анимацию по заданным параметрам, вроде этой.
function mooveItem(item, speed, pos, direction) {
/* Тут мы каждому объекту при добавлении анимации добавляем два свойства,
т.к. анимация цикличная они содержат данные о направлении движения в данный момент */
if(isNaN(item.ldir)) item.ldir = pos.min;
if(isNaN(item.tdir)) item.tdir = pos.min;
/* Меняем значение направления т.к. следующий цикл должен
произвести ту же анимацию, в обратном направлении */
if(direction == "h") item.ldir = item.ldir == pos.max ? pos.min : pos.max;
if(direction == "v") item.tdir = item.tdir == pos.max ? pos.min : pos.max;
/* Выбираем данные в зависимости от направления движения */
var animation = direction == "v" ? { top : item.tdir } : { left : item.ldir };
/* Функция анимации с рекурстивным вызовом */
item.animate(animation, {
duration : speed,
complete : function() { mooveItem(item, speed, pos, direction); },
queue : false // Этот параметр нужен для того, чтобы анимация в оба направления велась синхронно
});
}
Теперь нам бы функцию, которая создавала бы объект и назначала ему анимацию
function addPlanet() {
var bodyw = $("body").innerWidth();
var bodyh = $(window).height();
/* Создаем объект с параметрами размера (рандомный)
скорости, которая зависит от размера и стартовыми координатами (в данном случае центр) */
var size = Math.floor(Math.random() * 50);
var speed = size * 1000;
var obj = $("<div>");
obj
.addClass("obj")
.css("left", bodyw / 2)
.css("top", bodyh / 2)
.css("width", size)
.css("height", size);
/* Запускаем анимацию */
/* Движение по горизонтали ограничено шириной экрана, умножение на 10 для того чтобы объекты не заглядывали за края */
mooveItem(obj, speed, { min: size * 10, max: bodyw - size * 10 }, "h");
/* Движение по вертикали ограничено от 2/4 до 3/4 четвертями */
mooveItem(obj, speed, { min: bodyh / 2 - 100, max: bodyh / 2 + 100 }, "v");
$("body").append(obj);
}
Создадим пару CSS правил для внешнего вида объекта.
Кстати, если кто знает почему анимация с position: absolute; происходит быстрее чем с position: fixed;, рад буду выяснить.
body {
background: #000;
}
.obj {
border-radius: 50%;
opacity: 1;
box-shadow: 0px 0px 15px #fff;
border-radius: 50%;
position: absolute;
background: #fff;
}
Ну и теперь все это надо запустить
$(window).load(function() {
/* Поиграйте со значением 100, попробуйте разные вариации */
for(i=1; i<100; i++) addPlanet();
});
Смотрим красоту на JS Fiddle, смотреть лучше на весь экран
Пример 1, по топику [1]
Пример 2, очень похоже на большой взрыв [2]
Какие есть нюансы? Периодически файр баг диагностирует Too much recursion, зависит от количества, размера и скорости объектов, поэтому иногда скрипт отрабатывает не до конца и вы видите меньше объектов, чем должно быть, просто перезапустите. И опять же если кто знает где и как правильно кинуть исключение, буду рад подсказке, т.к. сам не могу сообразить.
Автор: Yan_Alex
Источник [3]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/48774
Ссылки в тексте:
[1] Пример 1, по топику: http://jsfiddle.net/6JMLL/
[2] Пример 2, очень похоже на большой взрыв: http://jsfiddle.net/S2HLC/
[3] Источник: http://habrahabr.ru/post/202858/
Нажмите здесь для печати.