Смотреть урок
Хочешь сделать сайт вроде тех, что показывает Apple: видео проигрывается по кадрам, пока листаешь страницу? Разбираем, как это работает и как собрать такой сайт с нуля.
Что внутри:
🔹 Механика эффекта: как скролл превращается в кадр видео, LERP-сглаживание, замедление у глав
🔹 Пошаговый процесс — от анализа ролика и дизайн-концепции до нарезки кадров и сборки готового сайта
🔹 Визуальная система: типографика, палитра, четыре фирменных приёма для интерфейса
🔹 Чего избегать — устаревшие «люксовые» штампы, из-за которых сайт выглядит шаблонно
💡 Весь процесс создания скролл-сайта из видео — от технической механики до критериев проверки результата — в одном гайде.
Animated Website превращает обычный видеофайл МР4, MOV или WebM в сайт, где скролл управляет воспроизведением. Пользователь прокручивает страницу — видео проигрывается кадр за кадром, синхронно с движением мыши или пальца по экрану. Это тот самый эффект, который используют Apple и автомобильные бренды в своих лендингах о новых продуктах.
Навык подходит для:
- автомобильных, модных и архитектурных лендингов
- портфолио и презентаций продуктов
- кинематографичных одностраничных сайтов, где текст появляется синхронно с кадрами видео
Важное уточнение: это не про встраивание обычного видеоплеера и не про конвертацию в GIF. Если сайт не строится вокруг покадровой видеопоследовательности — нужен другой инструмент.
Для работы навыку достаточно двух вещей: пути к видеофайлу и минимального понимания, что за объект в кадре. Всё остальное — цвета, тексты, количество кадров, структура глав — можно оставить на усмотрение инструмента: он анализирует видео и сам предлагает сильные решения по умолчанию. Уточняющий вопрос задаётся только тогда, когда без него не обойтись — например, если по видео совсем непонятно, что за продукт и для какой аудитории делается сайт.
В папке навыка четыре файла, и у каждого своя роль в процессе.
SKILL.md — главная инструкция и сценарий работы
Это ядро навыка. Файл описывает весь путь от видео до готового сайта: как анализировать ролик, как формулировать дизайн-концепцию, какое количество кадров извлекать в зависимости от длительности видео, как писать сценарий по главам, как компоновать текст вокруг картинки и как собирать финальную страницу на основе стартового шаблона. Здесь же таблица соответствия длительности видео и количества кадров, требования к доступности (accessibility) и список типичных проблем с решениями.
visual-system.md — справочник по визуальному языку
Этот…