IMAPO BLOG #7 - случайная погода на сайте или как мечта стала явью

Как только удалось полностью восстановить сайт, пришли и новые идеи. Первое, что необходимо было добавить - осеннее настроение. Я всегда старался преобразовывать внешний вид сайта в соответствии с текущим временем года. Идея вертелась в голове уже давно, часть задуманного уже реализовывалась ранее, часть пришлось писать с нуля. Очень повезло, что в восстановленном шаблоне уже была готова часть с дождём и грозой, но она была сыровата, да и не совсем подходила под новый концепт - погодные условия должны меняться очень плавно.  

ЭТАП НОМЕР НОЛЬ

Для начала я подготовил все стили, чтобы эффекты погоды проявлялись очень плавно (10 секунд) и я был очень рад, когда выяснилось, что CSS3 свойство TRANSITION работает с CSS3 ФИЛЬТРАМИ! Это позволило реализовать всё задуманное именно так, как мне хотелось  

ЭТАП НОМЕР РАЗ

Первое, что нужно было сделать - составить точное представление того, как всё будет выглядеть. Вот что я решил в итоге: в абсолютно случайный момент очень плавно будет начинаться либо гроза с дождём и молниями, либо подниматься ветер, несущий осенние листья. Далее, случайно работающий таймер будет обращаться к функции двух эффектов и тут три случайных варианта: 1. Либо текущий эффект будет плавно остановлен 2. Либо будет запущен второй эффект (Если была гроза, начинается ветер с листьями и наоборот) 3. Либо вообще ничего не произойдёт  

ЭТАП НОМЕР ДВА

Идея была готова и я начал кодить. Первый алгоритм работал, но, как потом оказалось, неверно и мне пришлось использовать вывод каждого из этапов работы скрипта в консоль. В итоге я плюнул и переписал весь алгоритм на следующий день. Как итог, всё заработало, как часы, но нужно было как-то предупреждать пользователей о том, что на сайте скоро будет та или иная погода. Тут я вспомнил игру Террария и мод OverHaul для неё. Там, когда должны были начаться ураганы, выходило сообщение с чем-то вроде "Начинается сезон ветров". Мне это очень нравилось и я решил сделать нечто подобное. Как итог, посетитель сайта может увидеть в правом нижнем углу сайта следующие сообщения: "Становится ветрено..." "Ветра утихают..." "Погода начинает портиться..." "Тучи расходятся..."  

ЭТАП НОМЕР ТРИ

Но мне было мало того, что на сайте случайная погода. Я хотел, чтобы состояние погоды запоминалось на тот случай, если посетитель обновит страницу или вовсе уйдёт с сайта. Как итог, если пользователь покидает страницу, на которой плохая погода (Гроза, Ветер или вообще оба этих явления), при возвращении обратно он увидит одно из следующих сообщений: "Ветра всё не утихают..." "Всё ещё пасмурно..." И будет запущена та погода, которая была в момент выхода со страницы сайта.   Для тех, кому интересно, что происходило во вкладке с IMAPO.RU, пока он отходил или просто залипал в соседних вкладках, я добавил отчёт в консоли браузера: Там вы увидите всё, что происходило с погодой, пока вкладка была неактивна.  

ПОСЛЕСЛОВИЕ

Для создания погодных условий были использованы следующие решения: ДОЖДЬ МОЛНИИ ЛИСТЬЯ НА ВЕТРУ ОБЛАКА