MediaWiki:Winter.js
Материал из Guild Wars 2 wiki
/** Winter.js * Добавление елки в логотип и генерация падающих снежинок (работает только зимой) * Автор Blood :) * Оригинал: https://jsfiddle.net/01zxae39 */ (function() { var d = new Date(), christmasTree, snowflakesContainer, snowflakeAnimIterMax; //Если сейчас не зима, то ничего не делаем if (d.getMonth() > 1 && d.getMonth() < 11) return; //Только с 10 декабря по 15 января if (d.getMonth() == 11 && d.getDate() >= 10 || d.getMonth() == 0 && d.getDate() <= 15) { //Зимний фон, логотип и дополнительные стили document.getElementById("column-content").setAttribute("class", "winter-background"); document.querySelector("#p-logo .mw-wiki-logo").style.backgroundImage = "url(/images/3/35/WikiLogo.png)"; document.querySelector("#p-personal .pBody").setAttribute("class", "pBody pBody-additional"); document.querySelector("#p-navigation h3").setAttribute("class", "navigation-additional"); //Создаем елку для логотипа christmasTree = document.createElement("img"); christmasTree.setAttribute("src", "/images/c/c9/Christmas_tree_%28animated%29.gif"); christmasTree.setAttribute("class", "christmas-tree"); document.getElementById("p-logo").appendChild(christmasTree); } //Создаем контейнер для снежинок 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, //Первоначальная x-координата снежинки snowflakeMoveDirection = Math.random() * 2 ^ 0, //Первоначальное направление покачивания снежинки snowflakeDownStep = 80, //Шаг снежинки вниз (за итерацию анимации) snowflakeSideStep = 30, //Шаг снежинки вбок (за итерацию анимации) snowflakeAnimIterCount = 0, //Счетчик количества итераций анимации снежинки snowflakeHeight; //Высота снежинки //Создаем снежинку snowflake.innerHTML = "❄"; 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); //Узнаем текущую y-координату снежинки //Если снежинка уже достигла максимального порога итераций анимации, удаляем ее (для крупных страниц) 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-fallen"); 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 ); } })();