MediaWiki:Winter.js — различия между версиями
Материал из Guild Wars 2 wiki
Blood (обсуждение | вклад) |
Blood (обсуждение | вклад) |
||
Строка 1: | Строка 1: | ||
− | /** | + | /** Winter.js |
* Добавление елки в логотип и генерация падающих снежинок (работает только зимой) | * Добавление елки в логотип и генерация падающих снежинок (работает только зимой) | ||
* Автор Blood :) | * Автор Blood :) |
Версия 23:58, 1 декабря 2018
/** Winter.js * Добавление елки в логотип и генерация падающих снежинок (работает только зимой) * Автор Blood :) * Оригинал: https://jsfiddle.net/01zxae39 */ (function() { var month = new Date().getMonth(), christmasTree, snowflakesContainer, snowflakeAnimIterMax; //Если сейчас не зима, то ничего не делаем if (month > 1 && month < 11) return; //Создаем елку для логотипа (только в январе и декабре) if (month == 0 || month == 11) { 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 ); } })();