Снег падает на людей, люди падают на снег

Блог 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();

В цикле создаем объекты с фоном из снежинки, запускаем таймер, при каждом срабатывании двигаем "снежинки" по экрану) Посмотреть пример

Теги: магия,JavaScript


Комментарии

Комментариев еще нет.
Добавить комментарий могут только авторизованные пользователи. Авторизоваться
Комментарий

Оценка





Авторизоваться через https://www.pvobr.ru
Логин
Пароль
Регистрация

Авторизоваться через соцсети
Наверх