Снег падает на людей, люди падают на снег
Блог 13 декабря 2016
Позвонил клиент, сказал, хочу снежинок у себя на сайте. Не вопрос. На коленке накидал скрипт.
//простой модуль для снежинок
if (typeof SNOWX == "undefined") {
function SNOWXObj(obj, x, y, v_x, v_y) {
this.obj = obj;
this.x = x;
this.y = y;
this.v_x = v_x;
this.v_y = v_y;
};
SNOWX = {
TOTAL: 50, //число объектов
V_Y: 8, //макс. скорость по вертикали
V_X: 8, //макс. скорость по горизонтали / 2
RATE: 10, //обновлений в секунду
RAD: 20, //радиус
divs: null,
tid: null,
//первый вызов!
init: function () {
var wid = $(window).width(), hei = $(window).height(), x, y;
var w = window, d = document;
var div0 = document.getElementsByTagName("div")[0];
this.divs = new Array();
for (var i = 0; i < this.TOTAL; i++) {
var obj = d.createElement("div");
x = Math.floor(Math.random() * (wid - 20));
y = Math.floor(Math.random() * (hei - 20));
obj.setAttribute("style", "background-color:#fff; opacity:0.5; border-radius:10px; height:20px; width:20px; position:fixed; left:" + x + "px; top:" + y + "px;");
div0.parentNode.insertBefore(obj, div0);
this.divs[i] = new SNOWXObj(obj, x, y, -SNOWX.V_X / 2 + this.variate(SNOWX.V_X), SNOWX.V_Y / 2 + this.variate(SNOWX.V_Y));
}
this.tid = window.setInterval(SNOWX.update, 1000 / this.RATE);
},
update: function () {
for (var i = 0; i < SNOWX.TOTAL; i++) {
var div = SNOWX.divs[i];
var obj = div.obj;
var x = div.x + div.v_x;
var y = div.y + div.v_y;
if (y > $(window).height() - 20) y = 0;
if (x < -20) x = $(window).width() - 20;
if (x > $(window).width()) x = 0;
var rad = SNOWX.RAD / 2 + SNOWX.variate(SNOWX.RAD / 2);
var opaq = 0.6 + Math.random() * 0.4;
obj.setAttribute("style", "z-index:1000015; background-size: 100% 100%; background-image: url(../../images/snowflake.png); opacity:" + opaq + "; border-radius:50%; height:" + rad + "px; width:" + rad + "px; position:fixed; left:" + x + "px; top:" + y + "px;");
div.x = x;
div.y = y;
div.v_x = -SNOWX.V_X / 2 + SNOWX.variate(SNOWX.V_X);
div.v_y = SNOWX.V_Y / 2 + SNOWX.variate(SNOWX.V_Y);
}
},
start: function (clr) {
},
stop: function () {
},
variate: function (q) {
return Math.floor(Math.random() * q);
}
}
}
SNOWX.init();
В цикле создаем объекты с фоном из снежинки, запускаем таймер, при каждом срабатывании двигаем "снежинки" по экрану) Посмотреть пример
Комментарии
Комментариев еще нет.
Добавить комментарий могут только авторизованные пользователи.
Авторизоваться