Лендинг «Красноармейского Крафта» с живой улицей

, сайт

Лендинг «Красноармейского Крафта» с живой улицей

У «Красноармейского Крафта» восемь точек входа: каналы, чаты и боты в МАКС и Телеграме, плюс сообщество ВКонтакте. Когда площадок столько, людям нужна одна понятная страница: вот мы, выбирайте, где удобнее. Так появился kraftyou.ru.

kraftyou-glavnaya.png1280×800, 96 КБ
Восемь карточек-ссылок и улица Красноармейска внизу
Восемь карточек-ссылок и улица Красноармейска внизу

Улица

Хотелось, чтобы страница была не просто списком ссылок, а кусочком города. Поэтому внизу живёт улица, целиком нарисованная на CSS, без единой картинки-анимации:

  • плывут облака, летают птицы, качаются деревья;
  • стоит указатель «Красноармейск — добро пожаловать» с гербом;
  • на остановке ждут люди: один машет рукой, другой смотрит в телефон;
  • мимо проезжают автобусы настоящих городских маршрутов — 21, 23, 43 и 317, с дымком из выхлопной трубы.

Кто в Красноармейске ездил на 43-м до Михайловского, тот узнает.

kraftyou-telefon.png390×844, 57 КБ
На телефоне карточки встают в две колонки, а улица остаётся
На телефоне карточки встают в две колонки, а улица остаётся

Детали

Если в системе отключена анимация, улица замирает. На телефоне кнопки слегка вибрируют под пальцем. Страница лёгкая: один шрифт, никаких фреймворков.