UI-анимация направляет внимание пользователя, снижает когнитивную нагрузку и создаёт эмоциональную связь с брендом. Грамотная motion-система превращает утилитарное взаимодействие в запоминающийся пользовательский опыт, повышая конверсию и лояльность.

Для сайта «Искра» разработана многоуровневая анимация: от эффектного прелоадера с «рождением» логотипа до тонких микровзаимодействий и скролл-эффектов. Каждый элемент работает на вовлечение, подчёркивает экспертность консалтинговой компании и формирует восприятие бренда как технологичного лидера.

Сцена 1. Preloader — «Рождение искры»Сцена 1. Preloader — «Рождение искры» (Кадры 1–8)

Триггер: Page load (загрузка страницы). Целевой элемент: Логотип «ИСКРА КОНСАЛТИНГ» на чёрном фоне. UX-цель: Создать вау-эффект, задать премиальный тон бренду и скрыть подгрузку тяжелых ресурсов.

Последовательность анимации:

  • Fade-in контура (кадры 1→2): логотип проявляется из полной темноты. opacity: 0 → 0.3, duration: 400ms, ease-in.
  • Проявление тела букв (кадры 2→3): заполнение белым цветом. duration: 500ms, ease-out.
  • Искра-блик (кадры 3→4→6→7): на букве «Я» появляется точечный блик/звёздочка. Анимация scale + opacity с лёгким glow-эффектом. duration: 300ms, cubic-bezier(0.2, 0.8, 0.2, 1) (упругий выход).
  • Fade-out прелоадера (кадр 8): весь экран уходит в затемнение, уступая место Hero. duration: 600ms, ease-in-out.

Сцена 2. Hero — «Раскрытие контента» (Кадры 9–12)

Триггер: Окончание прелоадера. Целевой элемент: Хедер, заголовок, подзаголовок, теги, CTA-кнопка, фоновая карта. UX-цель: Направить взгляд пользователя по визуальной иерархии, дать ощущение плавного «наполнения» страницы.

Stagger-анимация появления (сверху вниз, задержка 80–120ms между элементами):

  • Хедер: логотип, навигация и иконки. translateY(-20px) → 0, opacity: 0 → 1, 200ms.
  • Заголовок: три строки («Исследуем / Консультируем / Развиваем») появляются поочерёдно. translateY(30px) → 0, 400ms, ease-out.
  • Подзаголовок: opacity 0 → 1, 300ms.
  • Теги-чипсы: появляются горизонтальным stagger’ом слева направо. scale(0.9) → scale(1), по 60ms на элемент.
  • CTA-кнопка: финальный акцент. Заполнение красным цветом (background transition) + лёгкий pulse для привлечения внимания.
  • Фоновая карта мира: медленное проявление opacity 0 → 0.6 за 1200ms. Создаёт глубину, не отвлекая от контента.

Сцена 3. Микровзаимодействия (Кадры 13–16)

3.1 Hover на CTA-кнопке (кадр 13→14)

  • Триггер: hover.
  • Свойства: смена стиля с залитой красной на контурную. background: transparent, border: 1px solid #FF2D55, текст остаётся красным.
  • Тайминг: 200ms, ease-out.
  • Цель: Дать тактильный отклик и показать интерактивность элемента.

3.2 Тултип «Сделать скриншот» (кадр 11)

  • Триггер: Онбординг-подсказка для первого визита.
  • Свойства: появление с scale(0.8) → scale(1) + opacity.
  • Тайминг: 250ms, cubic-bezier(0.34, 1.56, 0.64, 1) (лёгкий bounce-эффект). Исчезает через 3–4 сек или по клику.

3.3 Модальное окно новости (кадр 15)

  • Триггер: клик по точке на карте (Кемеровская область).
  • Свойства: попап появляется с scale(0.95) → scale(1) + opacity 0 → 1. Фон затемняется overlay’ем (opacity 0 → 0.6).
  • Тайминг: 300ms, ease-out.
  • Цель: Сохранить пространственный контекст — пользователь получает детали, не покидая Hero-экран.

Сцена 4. Скролл-секции (Кадры 17–20)

4.1 Секция «О НАС» (кадр 16→17)

  • Триггер: scroll into viewport.
  • Целевой элемент: заголовок, подзаголовок, блок статистики (>20 лет), иконки заказчиков.
  • Свойства: классический reveal — translateY(40px) → 0 + opacity. Stagger по блокам.

4.2 Секция «ФИЛОСОФИЯ КОМПАНИИ» (кадры 18→20)

  • Триггер: scroll, элемент входит в viewport на ~30%.
  • Целевой элемент: большой фоновый логотип «ИСКРА» + три колонки (Исследование / Консалтинг / Развитие).
  • Свойства логотипа: буквы загораются последовательно слева направо (И → С → К → Р → А). Каждая буква: opacity 0.2 → 1 + лёгкий glow. Задержка между буквами ~150ms.
  • Свойства колонок: появляются синхронно с «зажиганием» соответствующих букв или сразу после полного логотипа.
  • Тайминг: ~1200ms на весь эффект.
  • Цель: Усилить брендовую идентичность, создать «вау» при скролле и визуально связать философию компании с её названием.