Разбираем процесс создания сайта с эффектами параллакса и анимациями с использованием бесплатных AI-инструментов. В материале — полный цикл: от подбора графики до финальной интеграции анимаций. Инструменты: Google AI Studio, Google Flow, Antigravity (Cursor), Freepik, EZGIF.
1. Подбор и подготовка графики
Где искать:
- Платформа Freepik с фильтром по тегу «AI»
- Отбор изображений по тематике проекта (в данном случае — миссия облёта Луны)
Что понадобится:
- Два ключевых изображения: дверь космического корабля и вид из иллюминатора
- Файлы в высоком разрешении для качественной отрисовки на экране
2. Базовая структура в Google AI Studio
- Перейдите на aistudio.google.com, выберите режим «Build»
- Используйте промт с описанием технологий, стилей и требований к сайту
- Первая версия генерируется за 2 минуты — с анимациями, шрифтами и навигацией
- Скачайте код в виде ZIP-архива для дальнейшей работы
3. Генерация видео-анимации в Google Flow
- Загрузите два изображения в сервис Flow (flow.google.com)
- Настройте параметры: укажите первый и последний кадр для генерации перехода
- Запустите создание анимации открывающихся дверей корабля
- Скачайте результат в версии 1080p для качественного отображения на сайте
4. Конвертация видео в последовательность кадров
Инструмент: EZGIF (раздел video tools → to sprites/frames)
Процесс:
- Загрузка видеофайла в сервис
- Установка фреймрейта — не менее 20 кадров в секунду
- Экспорт в ZIP-архиве с последовательностью изображений (140–200 кадров)
- Размещение папки с кадрами в проекте из AI Studio
5. Интеграция параллакс-эффекта через Antigravity
- Откройте проект в Antigravity (редактор Cursor)
- Установите зависимости через npm
- Используйте промт для настройки библиотеки GSAP и параллакс-эффектов
- Укажите директорию с кадрами видео для привязки анимации к скроллу
- Запустите проект и проверьте работу видеофона и параллакса в браузере
6. Доработка через итерации промтов
Что добавляется на этом этапе:
- Hero-секция с основным визуалом
- Карточки с blur-эффектом для контента
- Форма обратной связи
- Реакция элементов на курсор мыши (поворот карточек при наведении)
Финальные правки:
- Перевод интерфейса на русский язык
- Улучшение читаемости текста и контраста элементов
- Корректировка анимаций для плавности скролла
- Дополнительные итерации промтов до достижения нужного визуального эффекта
