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

FavoriteLoadingДобавить в закладки


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

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

 

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

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

 

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

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

1. Либо текущий эффект будет плавно остановлен
2. Либо будет запущен второй эффект (Если была гроза, начинается ветер с листьями и наоборот)
3. Либо вообще ничего не произойдёт

 

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

Идея была готова и я начал кодить. Первый алгоритм работал, но, как потом оказалось, неверно и мне пришлось использовать вывод каждого из этапов работы скрипта в консоль. В итоге я плюнул и переписал весь алгоритм на следующий день.

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

"Становится ветрено..."
"Ветра утихают..."
"Погода начинает портиться..."
"Тучи расходятся..."

 

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

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

"Ветра всё не утихают..."
"Всё ещё пасмурно..."

И будет запущена та погода, которая была в момент выхода со страницы сайта.

 

Для тех, кому интересно, что происходило во вкладке с IMAPO.RU, пока он отходил или просто залипал в соседних вкладках, я добавил отчёт в консоли браузера:

Там вы увидите всё, что происходило с погодой, пока вкладка была неактивна.

 

ПОСЛЕСЛОВИЕ

Для создания погодных условий были использованы следующие решения:

ДОЖДЬ

МОЛНИИ

ЛИСТЬЯ НА ВЕТРУ

ОБЛАКА

Автор публикации

не в сети 36 минут

Apocalypse

0
Я не понял вашего вопроса, но постараюсь на него ответить...
Комментарии: 344Публикации: 913Регистрация: 27-08-2018

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

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.