В данном уроке демонстрируется процесс создания веб-сайта со сложными анимациями и параллакс-эффектами без ручного написания кода. Автор показывает пайплайн работы: от генерации исходных изображений и склейки их в видео до конвертации в раскадровку. С помощью базовых промптов в Google AI Studio задается архитектура сайта, после чего проект локально дорабатывается через редактор Antigravity с использованием библиотеки GSAP для привязки видеофона к скроллу страницы.
0:00–1:04 Введение и демонстрация результата — Показ готового сайта с эффектом параллакса и интерактивным наплывающим фоном космического корабля.
1:29–3:15 Подготовка графики — Поиск и отбор сгенерированных ИИ изображений (стартовый и конечный кадры) для создания эффекта перехода.
3:15–6:20 Создание базовой структуры — Использование Google AI Studio для генерации фундамента сайта (шрифты, отступы, навбар) по объемному системному промпту.
6:20–8:06 Развертывание проекта — Перенос скачанного кода в локальную среду через Antigravity и установка зависимостей npm.
8:06–9:59 Анимация фонового видео — Склейка двух статичных картинок в плавный видеопереход с помощью ИИ-инструмента.
9:59–11:40 Конвертация видео в секвенцию кадров — Разбивка готового mp4-файла на отдельные JPEG-изображения для последующей покадровой анимации.
11:41–13:48 Настройка параллакса и GSAP — Передача раскадровки в…
🔒
Этот материал доступен участникам Клуба. Войдите или оформите доступ,
чтобы читать целиком, открывать видео и комментировать.