Анимированная карусель на коде: что двигать и как записать

В карусели три вещи, которые стоит двигать. Здесь — как это делается технически, с настройками и с моими граблями.

Оговорка для тех, кто ждёт видеоредактор: его не будет. Слайд у меня — обычная веб-страница, значит анимация тоже обычная, та же, что на сайтах. Браузер потом снимает с неё видео.

Зачем вообще движение

Лента листается большим пальцем на автомате. Движущийся кадр этот автомат сбивает — палец останавливается на долю секунды. Этого хватает, чтобы прочитать заголовок и решить, листать дальше или нет.

Всё. Никакой другой магии в анимации нет. Она покупает тебе секунду внимания, а дальше работает текст.

Что двигать: ровно три вещи

Появление строк по очереди. Заголовок въезжает не целиком, а построчно, с задержкой. Глаз идёт за движением и дочитывает до конца — вместо того чтобы схватить первую строку и пролистнуть.

Пульсация одного акцента. Кодовое слово на финале, цифра на обложке. Одна деталь, которая дышит. Не две.

Медленный ход фона. Едва заметное смещение подложки или градиента. Работает даже когда текст стоит: кадр перестаёт быть картинкой.

Всё остальное — мельтешение. Проверено на себе: когда двигалось всё сразу, заголовок читался хуже, чем на статике.

Как это собирается технически

Три шага.

Шаг 1. Обычная вёрстка слайда. Тот же файл, из которого рендерится картинка. Ничего специального.

Шаг 2. Анимация в стилях. Задаёшь, что двигается, откуда, куда и сколько секунд. Для появления строк — сдвиг снизу вверх плюс проявление прозрачности, с задержкой на каждую следующую строку.

Ключевые параметры, которые я подобрал опытом:

• длительность одного элемента — 0,5–0,7 секунды;
• задержка между строками — 0,15 секунды;
• вся анимация слайда укладывается в одну секунду.

Шаг 3. Запись. Браузер открывает страницу в режиме записи, снимает нужные секунды и отдаёт видеофайл. Локально, без сервисов и без загрузки твоих макетов на чужие серверы.

Мои грабли

Слишком долго. Первая версия шла три секунды. Выглядит солидно на компьютере и невыносимо в ленте: человек ждёт, пока буквы доедут, и листает раньше.

Двигалось всё сразу. Заголовок, карточки, фон, иконки. Кадр превратился в дискотеку, читаемость упала. Оставил одно движение на слайд.

Записывал в максимальном качестве. Файл на десятки мегабайт, а площадка всё равно пережимает по-своему. Обычного качества достаточно, разницы в ленте не видно.

Анимировал все восемь слайдов. Не нужно. Достаточно обложки — именно она решает, будут листать или нет. Остальные могут быть статикой.

Что получается на выходе

Из одной вёрстки — два формата. Картинка для обычных слайдов и короткое видео для обложки. Ставишь видео первым слайдом карусели — в ленте она оживает сама.

Честно про эффект

Анимация не спасает слабый текст. Она даёт задержку внимания и ощущение, что делал не любитель. Что человек прочитает за эту задержку — целиком зависит от заголовка.

Если выбирать, куда потратить вечер: сначала заголовок, потом анимация. В таком порядке.

Мои настройки, команду записи и разбор граблей я собрал в [МИКРО-ПРОДУКТ]: [ССЫЛКА-МИКРО].

Настройки, которые работают

Что	Значение	Почему так
Длительность элемента	0,5–0,7 сек	быстрее — дёрганно, медленнее — вяло
Задержка между строками	0,15 сек	глаз успевает перейти, но не заскучать
Вся анимация слайда	до 1 сек	дольше — человек пролистнёт раньше финала
Смещение при появлении	12–20 px	больше — текст «прыгает»
Ход фона	20–30 сек на цикл	должно быть почти незаметно
Частота записи	30 кадров/сек	60 не даёт видимой разницы, файл вдвое тяжелее

Как выглядит анимация в коде

.line {
  opacity: 0;
  transform: translateY(16px);
  animation: rise .6s ease-out forwards;
}
.line:nth-child(2) { animation-delay: .15s }
.line:nth-child(3) { animation-delay: .30s }

@keyframes rise {
  to { opacity: 1; transform: none }
}

Это весь механизм появления строк. Ни библиотек, ни редактора — те же стили, что на обычном сайте.

Порядок сборки

1. Свёрстан слайд как обычная страница — тот же файл, из которого рендерится картинка.
2. Добавлены стили анимации: что двигается, откуда, куда и сколько секунд.
3. Браузер открывает страницу в нужном размере кадра и пишет видео.
4. Готовый файл собирается в ролик и уходит в мессенджер.

Весь путь запускается одной командой и укладывается примерно в минуту на слайд.

Четыре ошибки, каждая ценой в вечер

Двигал всё сразу. Заголовок, фон, иконки, кодовое слово — кадр превращался в мельтешение, и текст читался хуже, чем на статике. Правило родилось отсюда: одновременно движется одна смысловая деталь.

Ставил длинные анимации. Полторы-две секунды на слайд казались солиднее. На деле человек пролистывал раньше, чем движение заканчивалось, и не видел ни финала анимации, ни половины заголовка.

Записывал в 60 кадров. Файл потянул вдвое больше, разницы на глаз никакой. Тридцати хватает для любого движения, которое есть на слайде.

Забывал про первый кадр. Видео начинается с пустого экрана, потому что элементы ещё не появились. В ленте это выглядит как сломанный ролик. Лечится тем, что первый кадр статичный, а анимация стартует с небольшой задержкой.

Частые вопросы

Нужен ли видеоредактор для анимированной карусели?

Нет. Слайд — обычная веб-страница, анимация делается стилями, а видео пишет сам браузер. Редактор нужен только если хочется монтажа со звуком и переходами.

Сколько должна длиться анимация одного слайда?

До секунды. Дольше — человек листает раньше, чем движение закончилось, и весь эффект пропадает.

Что двигать, а что оставить статичным?

Двигать три вещи: появление строк, один акцент и медленный фон. Всё остальное превращается в мельтешение, и заголовок читается хуже, чем на статике.

Не мешает ли анимация читать текст?

Мешает, если двигается всё сразу. Правило простое: в кадре одновременно движется одна смысловая деталь, остальное стоит.

Дальше по теме

• Семь ролей ИИ-отдела: в каком порядке нанимать и где он ломается — кто рисует эти слайды каждый день.
• Шесть звеньев между комментарием и подписчиком — что делать с вниманием, которое ты купил секундой движения.
• Свой скилл для Claude за один вечер — как оформить это в повторяемый процесс.