Мы продолжаем обновлять сайт SkeekS — постепенно, блок за блоком. На этот раз добрались до раздела с географией проектов на странице «О компании». Раньше здесь была интерактивная карта России, а теперь появился большой ночной глобус, который вращается, показывает города и подчёркивает, что наши проекты давно вышли за пределы одной страны.
Что было раньше
Предыдущая версия блока была построена вокруг стилизованной карты России. На ней были отмечены 21 город — от Калининграда до Владивостока. Активная точка пульсировала, а название города менялось по мере переключения маркеров.
Для своего времени решение работало хорошо: карта быстро объясняла, что расстояние не мешает нам вести проекты по всей стране. Но после обновления остальных разделов страницы этот блок начал выглядеть слишком отдельным: рамка, плоский контур и жёсткие границы фона уже не соответствовали более глубокому и атмосферному стилю сайта.
Почему решили сделать глобус
Главная причина — реальная география нашей работы стала шире. Помимо российских городов, у SkeekS есть проекты в Италии, Испании, США, Португалии и Латвии. Карта одной страны уже рассказывала только часть истории.
Нам хотелось сохранить понятный образ «от Калининграда до Владивостока», но добавить к нему продолжение. Поэтому заголовок блока теперь звучит так: «От Калининграда до Владивостока — и дальше».
Глобус оказался точнее и по смыслу, и по эмоции. Он не просто перечисляет города, а создаёт ощущение живой сети проектов: планета медленно вращается, новые точки входят в поле зрения, а интерфейс реагирует на их положение.
От идеи к первому прототипу
Сначала мы определили характер будущего блока. Это должен был быть не яркий «космический аттракцион», а спокойный технологичный объект в стиле страницы: глубокий сине-графитовый фон, ночные огни городов, тонкое голубое свечение атмосферы, бирюзовые маркеры и коралловый импульс активной точки.
В основу легла WebGL-сцена с текстурой ночной Земли. Для глобуса используются реальные координаты городов и стран. На поверхности размещены:
- 21 российский город — от Калининграда и Санкт-Петербурга до Хабаровска и Владивостока;
- международные точки: Италия, Испания, США, Португалия и Латвия;
- обычные маркеры с мягким неоновым свечением;
- пульсирующее кольцо и подпись для активной точки.
Как менялась анимация
Первая версия сама переводила камеру от города к городу. Это выглядело эффектно, но движение получалось слишком сценарным: глобус постоянно менял направление и словно подстраивался под список точек.
В финальном варианте логика стала естественнее. Глобус равномерно вращается в одну сторону, а интерфейс не управляет камерой. Вместо этого он определяет, какая точка находится ближе к центру видимой полусферы. Когда город или страна входит в фокус, маркер начинает пульсировать, рядом появляется подпись, а слева плавно меняется название.
Пользователь по-прежнему может повернуть глобус вручную. Во время перетаскивания автоматическое движение ставится на паузу, а затем спокойно продолжается. Если блок ушёл за пределы экрана, анимация останавливается, чтобы не тратить ресурсы. Также предусмотрен режим prefers-reduced-motion для пользователей, которые отключают лишнее движение в системе.
Самая незаметная часть работы — переходы между фонами
Отдельно дорабатывали то, что обычно замечаешь только тогда, когда оно сделано плохо: стыки блока с соседними секциями. На первых итерациях вокруг WebGL-холста были видны жёсткие прямоугольные края, а синий свет под глобусом резко обрывался.
Мы несколько раз меняли высоту секции, маску холста и длину градиентов. В итоге свечение растворяется в общем фоне сверху и снизу, но сам блок не становится чрезмерно длинным. На переходе к светлой истории SkeekS остаётся чёткая структура страницы без серой «грязной» полосы.
Вписали глобус в архитектуру темы
Сам блок не хранит внешние зависимости в публичной папке сайта. JavaScript, стили, текстура Земли и библиотека глобуса оформлены как отдельный asset-набор внутри темы Yii2. При открытии страницы SkeekS CMS публикует нужные файлы штатным способом и передаёт скрипту актуальный URL текстуры.
Так решение остаётся частью темы, не смешивается с пользовательскими загрузками и может дальше развиваться вместе со страницей «О компании».
Что получилось
Новый блок одновременно решает несколько задач:
- показывает российскую и международную географию проектов;
- поддерживает общий тёмный технологичный стиль страницы;
- создаёт выразительный визуальный момент без агрессивной анимации;
- остаётся интерактивным и адаптируется под мобильные экраны;
- бережно относится к производительности и настройкам доступности.
Для нас это хороший пример того, как развивается собственный сайт: не обязательно переделывать всё одним большим релизом. Иногда достаточно внимательно пересобрать один знакомый блок — его смысл, поведение и детали — и страница начинает восприниматься совсем иначе.