Задание: Доработка сайтов. Модернизация сайта (Дистанционная работа)
Техническое задание: Реализация иммерсивного Intro для сайта TDI
1. Общая концепция
Создание интерактивного вступления (Interactive Landing Experience), которое визуализирует глобальную проблему утечек воды и представляет компанию TDI через сторителлинг.
2. Технологический стек (рекомендуемый)
• Frontend: React.js или Next.js.
• 3D/Graphics: Three.js (предпочтительно) или высококачественное видео (WebM/MP4) с альфа-каналом.
• Анимация: GSAP (GreenSock Animation Platform) для синхронизации текста и камеры.
• Аудио: Howler.js для управления звуковыми потоками (музыка + диктор).
3. Функциональные этапы
Этап 1: Входной шлюз (Language Gate)
• Экран: Минимализм, темный фон. Кнопки выбора языков.
• Логика: Клик по кнопке — это обязательное условие (User Gesture) для активации звука в браузере. После клика запускается основной сценарий.
Этап 2: Анимация "Deep Space to Earth"
• Визуал: Сцена на Three.js с 3D-моделью Земли. Высокая детализация текстур воды. Смена освещения от космического до дневного.
• Движение: Камера совершает экспоненциальное приближение (Zoom-in) к конкретной геолокации (Израиль).
• Аудио: Плавное нарастание (Fade-in) фоновой музыки. Запуск аудиодорожки с дикторским текстом на выбранном языке.
Этак 3: Синхронизированный текст (Overlay)
• Механика: Текст не является частью видео. Он рендерится поверх 3D-сцены слоем HTML/Canvas.
• Синхронизация: Появление абзацев текста строго привязано к таймкодам аудио (используя GSAP Timeline).
• Эффект: Плавное появление (Fade-up) и размытие при исчезновении.
Этап 4: Переход к контенту (Transition)
• Когда диктор доходит до части о компании TDI, 3D-сцена плавно смещается в сторону или становится размытым фоном (Blur), освобождая место для структурированного списка услуг и кнопок призыва к действию (CTA).
4. Обязательные элементы управления (UI)
• Кнопка "Skip Intro": В правом нижнем углу. При нажатии — моментальная остановка всех анимаций и переход к главному меню сайта.
• Mute/Unmute: Переключатель звука (иконка динамика).
• Progress Bar: Тонкая линия внизу, показывающая длительность аудио-рассказа.
5. Оптимизация и производительность
• Lazy Loading: 3D-модели и аудио должны подгружаться в фоновом режиме.
• Mobile version: Для мобильных устройств (iOS/Android) предусмотреть упрощенную версию (замена тяжелого 3D на качественную статичную графику или легкое видео), чтобы избежать перегрева устройства и медленной загрузки.
