Верстка сайта для проекта fange
![Верстка сайта для проекта fange](/uploads/posts/2019-05/1557966739_fange_first.jpg)
Дизайн:
Dezi
Вид работ:
Отзывчивая верстка для дальнейшей посадки на MMOWEB
В первую очередь я хотел бы рассказать о переключателе языков в выпадающем списке:
![Выпадающий список языков](/uploads/posts/2019-05/1557966195_fange-lang-select.jpg)
Необходимо было заставить его работать через виджет Google Translate. Ранее я уже делал неоднократно такие переключатели, но использовал не самый подходящий скрипт, который я нашел на одном из сайтов. Скрипт работал не стабильно, он был сложно читаем и крайне не удобен для модификаций. Поскольку я давно думал о том чтобы написать свое решение, я понял, что пришло время. И в итоге реализовал вот такой переключатель:
![Переключатель языков fange](/uploads/posts/2019-05/1557966869_fange-lang-select.gif)
Более подробно о нем можно почитать в моей первой статье на хабре благодаря которой я получил полноправный аккаунт и был рад, что мои усилия не напрасны. Скрипт активно используют другие разработчики и иногда пишут мне, когда что-то не получается. Скачать последнюю актуальную версию можно с реппозитория на github.
Отдельного внимания так же заслуживает адаптивное двухуровневое меню со скользящей линией:
![fange-slider-nav](/uploads/posts/2019-05/1558007623_fange-slider-nav.gif)
Вид на мобильных устройствах:
![Fange мобильное меню](/uploads/posts/2019-05/1558007985_fange-nav-mobile.gif)
Были реализованы адаптивные модальные окна:
Файлы:
![fange окно с файлами](/uploads/posts/2019-05/medium/1558010320_fange-modal-files.jpg)
Пожертвования:
![Fange окно с пожертвованиями](/uploads/posts/2019-05/medium/1558010258_fange-modal-donate.jpg)
А так же прелоадер, слайдер новостей, переключатель табов с рейтингом игроков и автоматическая вставка стримов через js с задержкой, чтобы не нагружать сайт при загрузке.
![Выпадающий список языков](/uploads/posts/2019-05/1557966195_fange-lang-select.jpg)
Необходимо было заставить его работать через виджет Google Translate. Ранее я уже делал неоднократно такие переключатели, но использовал не самый подходящий скрипт, который я нашел на одном из сайтов. Скрипт работал не стабильно, он был сложно читаем и крайне не удобен для модификаций. Поскольку я давно думал о том чтобы написать свое решение, я понял, что пришло время. И в итоге реализовал вот такой переключатель:
![Переключатель языков fange](/uploads/posts/2019-05/1557966869_fange-lang-select.gif)
Более подробно о нем можно почитать в моей первой статье на хабре благодаря которой я получил полноправный аккаунт и был рад, что мои усилия не напрасны. Скрипт активно используют другие разработчики и иногда пишут мне, когда что-то не получается. Скачать последнюю актуальную версию можно с реппозитория на github.
Отдельного внимания так же заслуживает адаптивное двухуровневое меню со скользящей линией:
![fange-slider-nav](/uploads/posts/2019-05/1558007623_fange-slider-nav.gif)
Вид на мобильных устройствах:
![Fange мобильное меню](/uploads/posts/2019-05/1558007985_fange-nav-mobile.gif)
Были реализованы адаптивные модальные окна:
Файлы:
![fange окно с файлами](/uploads/posts/2019-05/medium/1558010320_fange-modal-files.jpg)
Пожертвования:
![Fange окно с пожертвованиями](/uploads/posts/2019-05/medium/1558010258_fange-modal-donate.jpg)
А так же прелоадер, слайдер новостей, переключатель табов с рейтингом игроков и автоматическая вставка стримов через js с задержкой, чтобы не нагружать сайт при загрузке.
Более детально элементы сайта и взаимодействие с пользователем можно увидеть на видео:
Категория: Игровые сайты / Landing page
Комментарии