MediaWiki:Winter.js

Материал из Guild Wars 2 wiki
Версия от 23:53, 19 декабря 2017; Blood (обсуждение | вклад) (Новая страница: «/** Snowflakes.js * Генерация падающих снежинок (работает только зимой) * Автор Blood :) * Оригинал:…»)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск
/** Snowflakes.js
 * Генерация падающих снежинок (работает только зимой) 
 * Автор Blood :)
 * Оригинал: https://jsfiddle.net/01zxae39
 */

(function() {
    var month = new Date().getMonth(), snowflakesContainer, snowflakeAnimIterMax;
    
    if (month > 1 && month < 11) return;
    
    snowflakesContainer = document.createElement("div");
    snowflakesContainer.setAttribute("class", "snowflakes-container");
    snowflakesContainer.ondragstart = function() {
        return false;
    };
    document.body.appendChild(snowflakesContainer);
    snowflakeAnimIterMax = 40;

    createSnowflake();
    setInterval(createSnowflake, 2500);

    function createSnowflake() {
        var snowflake = document.createElement("div"),
            windowWidth = document.documentElement.clientWidth,
            snowflakeLeftOrigin = Math.random() * windowWidth ^ 0,
            snowflakeMoveDirection = Math.random() * 2 ^ 0,
            snowflakeDownStep = 80,
            snowflakeSideStep = 30,
            snowflakeAnimIterCount = 0,
            snowflakeHeight;

        snowflake.innerHTML = "&#10052;";
        snowflake.setAttribute("class", "snowflake snowflake-falling");
        snowflakesContainer.appendChild(snowflake);

        snowflake.style.top = -snowflake.offsetHeight + "px";
        snowflakeLeftOrigin = (snowflakeLeftOrigin + snowflake.offsetWidth +
                snowflakeSideStep + 3 > windowWidth) ? windowWidth - snowflake.offsetWidth -
            snowflakeSideStep - 3 : snowflakeLeftOrigin;
        snowflake.style.left = snowflakeLeftOrigin + "px";
        snowflakeHeight = snowflake.offsetHeight;

        (function animateSnowflake() {
            var snowflakeTop = parseInt(getComputedStyle(snowflake).top);

            if (snowflakeAnimIterCount > snowflakeAnimIterMax) {
                snowflakesContainer.removeChild(snowflake);
                return;
            }

            if (snowflakeTop + snowflakeHeight + snowflakeDownStep + 2 < getPageScrollHeight()) {
                snowflake.style.top = snowflakeTop + snowflakeDownStep + "px";

                if (snowflakeMoveDirection) {
                    snowflake.style.left = snowflakeLeftOrigin + snowflakeSideStep + "px";
                    snowflake.style.transform = "rotate(180deg)";
                } else {
                    snowflake.style.left = snowflakeLeftOrigin - snowflakeSideStep + "px";
                    snowflake.style.transform = "rotate(-180deg)";
                }

                snowflakeMoveDirection = !snowflakeMoveDirection;
                ++snowflakeAnimIterCount;

                setTimeout(animateSnowflake, 1500);
            } else {
                snowflake.setAttribute("class", "snowflake snowflake-fell");
                snowflake.style.top = getPageScrollHeight() - snowflakeHeight - 2 + "px";
                snowflake.style.left = snowflakeLeftOrigin + "px";
                snowflake.style.transform = "rotate(0deg)";

                setTimeout(function() {
                    snowflakesContainer.removeChild(snowflake);
                }, 20000);
            }
        })();
    }

    function getPageScrollHeight() {
        return Math.max(
            document.body.scrollHeight, document.documentElement.scrollHeight,
            document.body.offsetHeight, document.documentElement.offsetHeight,
            document.body.clientHeight, document.documentElement.clientHeight
        );
    }
})();