Калуга — город, пропитанный отечественной космонавтикой. Нигде в России вы не встретите столько памятников, улиц, парков космической направленности. Это город, тесно связанный с К. Э. Циолковским, ведь именно здесь он прожил большую часть своей жизни и написал свои главные труды.

САЙТ, ПОСВЯЩЕННЫЙ КОСМИЧЕСКОЙ КАЛУГЕ

Сделать сайт, где можно посмотреть космический маршрут по Калуге с основными достопримечательностями, погрузиться в Калужский планетарий и забронировать экскурсии в Государственном музее истории космонавтики им. К. Э. Циолковского.

КАЛУГА - ТЫ ПРОСТО КОСМОС!

ГЛАВНАЯ ЦЕЛЬ ПРОЕКТА

ДИЗАЙН САЙТА В ФИГМЕ И ПЕРЕНОС В ТИЛЬДУ

Концепция сайта подразумевала много анимации и нестандартных решений. Для реализации этого множество изображений были вырезаны вручную и обработаны в графическом редакторе Фигма

ПОДГОТОВКА ИЗОБРАЖЕНИЙ И GIF

Создан детальный дизайн-макет в графическом редакторе Фигма. Каждая будущая анимация была детально проработана и пошагово нарисована

СОЗДАНИЕ ДИЗАЙН-МАКЕТА В ФИГМЕ

Сначала верстка в Тильде осуществлялась поэлементным переносом файлов из Фигмы в Тильду без настройки пошаговой анимации, без добавления кода и т. д.

ПЕРЕНОС МАКЕТА В ТИЛЬДУ

В проекте были настроены практически все виды Step by Step анимации:
  • On screen — элемент анимируется, если находится на экране
  • On scroll — элемент анимируется по скроллу (горизонтально или вертикально)
  • On hover — элемент анимируется, если мышью навести на какой либо обьект (триггер).

НАСТРОЙКА ПОШАГОВОЙ АНИМАЦИИ

С помощью кода в проекте были сделаны следующие модификации:

  • ⁃ Летающие интерактивные созвездия на главном экране;
  • ⁃ Анимированное меню в зеро блоке;
  • ⁃ В левом верхнем углу добавлена кнопка включения/выключения космической музыки (ППК «Воскрешение»)

РАБОТА С КОДОМ

ПОСМОТРЕТЬ КОНЕЧНЫЙ РЕЗУЛЬТАТ МОЖНО В ВИДЕО

ТЕХНИЧЕСКИЕ НАСТРОЙКИ

  • Настроена мобильная версия в 4 дополнительных разрешениях экрана;
  • Создана анимированная страница 404.

ВАШ БУДУЩИЙ ПРОЕКТ БУДЕТ ЕЩЕ ЛУЧШЕ! ДАВАЙТЕ НАЧНЕМ РАБОТУ?

Заполните простую форму и я свяжусь с вами в ближайшее время