16 моушн-эффектов без After Effects

Создай файл effect.html — моушн-эффект «Кнопка → плеер» на HTML, CSS и JavaScript, без библиотек, всё в одном файле, включая шрифты.
Сцена: [1080×1350 для карусели], тёмный фон.
Цикл 8 секунд: два повтора по 4 секунды с одинаковым движением. Анимация идёт по кругу, последний кадр совпадает с первым.
Что происходит в каждом повторе:
— 0–0,4 с: курсор подъезжает к кнопке «Смотреть демо» и нажимает, кнопка чуть проседает
— 0,5–1,3 с: кнопка вырастает во весь экран и превращается в видеоплеер (картинка, полоса прогресса, кнопка паузы, название, таймер)
— 1,1–3,4 с: в плеере идёт «видео» — по сцене прыгает шар, полоса прогресса и таймер идут от 0:00 до 0:42, снизу по одному слову появляются субтитры
— 3,4–3,9 с: плеер сжимается обратно в кнопку
Движение плавное: где что-то появляется или вырастает — с лёгкой пружиной, если в шагах не сказано иначе.
Слова: [Смотри демо за 2 минуты]
Цвета: [два hex-кода]
Цифры, которых нет в моих словах, подпиши «пример».

Создай файл effect.html — моушн-эффект «Живой поиск» на HTML, CSS и JavaScript, без библиотек, всё в одном файле, включая шрифты.
Сцена: [1080×1350 для карусели], тёмный фон.
Цикл 8 секунд: два повтора по 4 секунды с одинаковым движением. Анимация идёт по кругу, последний кадр совпадает с первым.
Что происходит в каждом повторе:
— 0–0,8 с: в строке поиска по буквам печатается запрос «весенний запуск»
— 0,9–1,8 с: под строкой одна за другой выезжают снизу три карточки результатов (иконка, название, подпись)
— 3,0–3,4 с: карточки гаснут
— 3,4–3,9 с: запрос стирается. Во втором повторе — другой запрос и другие три результата
Движение плавное: где что-то появляется или вырастает — с лёгкой пружиной, если в шагах не сказано иначе.
Слова: [1-й повтор: «весенний запуск» → Письмо о запуске, Рилс с анонсом, Лендинг запуска; 2-й повтор: «вебинар» → Запись эфира, Слайды вебинара, Бот регистрации]
Цвета: [два hex-кода]
Цифры, которых нет в моих словах, подпиши «пример».

Создай файл effect.html — моушн-эффект «Карточка → окно» на HTML, CSS и JavaScript, без библиотек, всё в одном файле, включая шрифты.
Сцена: [1080×1350 для карусели], тёмный фон.
Цикл 8 секунд: два повтора по 4 секунды с одинаковым движением. Анимация идёт по кругу, последний кадр совпадает с первым.
Что происходит в каждом повторе:
— 0–0,4 с: курсор подъезжает к маленькой карточке «Бриф Q3» и нажимает
— 0,45–1,25 с: карточка раскрывается в большое светлое окно: заголовок окна, меню слева, заголовок «План запуска», картинка и чек-лист из трёх пунктов
— 1,4–2,8 с: галочки в чек-листе ставятся по одной
— 3,35–3,9 с: окно сворачивается обратно в карточку
Движение плавное: где что-то появляется или вырастает — с лёгкой пружиной, если в шагах не сказано иначе.
Слова: [«Бриф запуска» → «План кампании»]
Цвета: [два hex-кода]
Цифры, которых нет в моих словах, подпиши «пример».

Создай файл effect.html — моушн-эффект «Смена вкладок» на HTML, CSS и JavaScript, без библиотек, всё в одном файле, включая шрифты.
Сцена: [1080×1350 для карусели], тёмный фон.
Цикл 8 секунд. Анимация идёт по кругу, последний кадр совпадает с первым.
Что происходит:
— Три вкладки «Рилс», «Посты», «Email» в одной капсуле, под ними панель со списком из трёх строк
— Каждую секунду курсор нажимает следующую вкладку: Рилс → Посты → Email → Рилс…
— Подсветка вкладки переезжает с пружиной за 0,5 с
— Содержимое панели меняется, строки поднимаются снизу по очереди с задержкой 0,05 с
Движение плавное: где что-то появляется или вырастает — с лёгкой пружиной, если в шагах не сказано иначе.
Слова: [тарифы Старт, Про, Команда]
Цвета: [два hex-кода]
Цифры, которых нет в моих словах, подпиши «пример».

Создай файл effect.html — моушн-эффект «Столбики → линия» на HTML, CSS и JavaScript, без библиотек, всё в одном файле, включая шрифты.
Сцена: [1080×1350 для карусели], тёмный фон.
Цикл 8 секунд: два повтора по 4 секунды с одинаковым движением. Анимация идёт по кругу, последний кадр совпадает с первым.
Что происходит в каждом повторе:
— 0–1,0 с: шесть столбиков графика «Охват за неделю» вырастают снизу по очереди, с пружиной
— 1,0–1,9 с: столбики сужаются и бледнеют, через их вершины рисуется плавная линия, под ней заливка, на вершинах появляются точки
— 3,0–3,5 с: линия исчезает, столбики возвращаются
— 3,5–3,95 с: столбики опускаются до нуля
— В углу всё время видна плашка «пример»
Движение плавное: где что-то появляется или вырастает — с лёгкой пружиной, если в шагах не сказано иначе.
Слова: [регистрации на вебинар, пн–сб]
Цвета: [два hex-кода]
Цифры, которых нет в моих словах, подпиши «пример».

Создай файл effect.html — моушн-эффект «Фокус на цифре» на HTML, CSS и JavaScript, без библиотек, всё в одном файле, включая шрифты.
Сцена: [1080×1350 для карусели], тёмный фон.
Цикл 8 секунд: два повтора по 4 секунды с одинаковым движением. Анимация идёт по кругу, последний кадр совпадает с первым.
Что происходит в каждом повторе:
— На экране дашборд: три плитки с цифрами и графиком под ними
— 0–0,3 с: рамка из уголков обводит одну плитку
— 0,5–1,2 с: эта плитка выезжает в центр и увеличивается в 2,3 раза, остальное размывается и темнеет; в плитке рисуется мини-график
— 3,1–3,7 с: плитка возвращается на место. Во втором повторе выезжает другая плитка
Движение плавное: где что-то появляется или вырастает — с лёгкой пружиной, если в шагах не сказано иначе.
Слова: [плитка «Новые лиды» и моя цифра]
Цвета: [два hex-кода]
Цифры, которых нет в моих словах, подпиши «пример».

Создай файл effect.html — моушн-эффект «Веер из карточек» на HTML, CSS и JavaScript, без библиотек, всё в одном файле, включая шрифты.
Сцена: [1080×1350 для карусели], тёмный фон.
Цикл 8 секунд: два повтора по 4 секунды с одинаковым движением. Анимация идёт по кругу, последний кадр совпадает с первым.
Что происходит в каждом повторе:
— В центре стопка из трёх карточек (картинка, название, подпись)
— 0–1,4 с: карточки разлетаются веером: крайние уходят влево и вправо с поворотом на 11°, средняя приподнимается, всё с заметной пружиной
— 2,2–3,7 с: карточки с пружиной собираются обратно в стопку
Движение плавное: где что-то появляется или вырастает — с лёгкой пружиной, если в шагах не сказано иначе.
Слова: [офферы Аудит, Спринт, Ведение]
Цвета: [два hex-кода]
Цифры, которых нет в моих словах, подпиши «пример».

Создай файл effect.html — моушн-эффект «Панель как в macOS» на HTML, CSS и JavaScript, без библиотек, всё в одном файле, включая шрифты.
Сцена: [1080×1350 для карусели], тёмный фон.
Цикл 8 секунд. Анимация идёт по кругу, последний кадр совпадает с первым.
Что происходит:
— Внизу панель из семи иконок, как док в macOS
— 0–3,8 с: курсор плавно едет над панелью слева направо; 4–7,8 с: обратно
— Иконка под курсором плавно увеличивается почти вдвое, соседние — слабее: увеличение спадает от курсора колоколом
— Над самой большой иконкой всплывает подсказка с её названием
Движение плавное: где что-то появляется или вырастает — с лёгкой пружиной, если в шагах не сказано иначе.
Слова: [подписи для 7 инструментов моего стека]
Цвета: [два hex-кода]
Цифры, которых нет в моих словах, подпиши «пример».

Создай файл effect.html — моушн-эффект «Фото внутри букв» на HTML, CSS и JavaScript, без библиотек, всё в одном файле, включая шрифты.
Сцена: [1080×1350 для карусели], тёмный фон.
Цикл 8 секунд: два повтора по 4 секунды с одинаковым движением. Анимация идёт по кругу, последний кадр совпадает с первым.
Что происходит в каждом повторе:
— Крупное слово «ЗАПУСК» контуром, без заливки
— 0–1,4 с: внутри букв снизу вверх поднимается фото, по краю заливки идёт светящаяся линия
— 1,3–2,0 с: под словом с пружиной появляется подпись
— 3,0–3,3 с: подпись исчезает; 3,2–3,85 с: фото опускается обратно
Движение плавное: где что-то появляется или вырастает — с лёгкой пружиной, если в шагах не сказано иначе.
Слова: [слово ОСЕНЬ, под ним подпись «старт 1 ноября»]
Цвета: [два hex-кода]
Цифры, которых нет в моих словах, подпиши «пример».

Создай файл effect.html — моушн-эффект «Буквы как резинка» на HTML, CSS и JavaScript, без библиотек, всё в одном файле, включая шрифты.
Сцена: [1080×1350 для карусели], тёмный фон.
Цикл 8 секунд. Анимация идёт по кругу, последний кадр совпадает с первым.
Что происходит:
— Крупное слово «ТЯНИСЬ», каждая буква — отдельный элемент, стоит на базовой линии
— По слову слева направо бежит волна: три прохода за 8 секунд
— Буква под волной вытягивается вверх в 1,6 раза, чуть сужается, подсвечивается и пружинит обратно
— За волной едет курсор, в углу счётчик «stretch ×1.00»
Движение плавное: где что-то появляется или вырастает — с лёгкой пружиной, если в шагах не сказано иначе.
Слова: [название моего эфира]
Цвета: [два hex-кода]
Цифры, которых нет в моих словах, подпиши «пример».

Создай файл effect.html — моушн-эффект «Заголовок → статья» на HTML, CSS и JavaScript, без библиотек, всё в одном файле, включая шрифты.
Сцена: [1080×1350 для карусели], тёмный фон.
Цикл 8 секунд: два повтора по 4 секунды с одинаковым движением. Анимация идёт по кругу, последний кадр совпадает с первым.
Что происходит в каждом повторе:
— В начале — узкая плашка с заголовком в одну строку
— 0,2–1,0 с: плашка с пружиной разворачивается во всю страницу, заголовок переезжает влево вверх и становится крупнее
— 0,6–1,4 с: по очереди проявляются рубрика, картинка и цитата
— 3,0–3,85 с: всё сворачивается обратно в одну строку
Движение плавное: где что-то появляется или вырастает — с лёгкой пружиной, если в шагах не сказано иначе.
Слова: [заголовок моей статьи и цитата из неё]
Цвета: [два hex-кода]
Цифры, которых нет в моих словах, подпиши «пример».

Создай файл effect.html — моушн-эффект «Эффект жалюзи» на HTML, CSS и JavaScript, без библиотек, всё в одном файле, включая шрифты.
Сцена: [1080×1350 для карусели], тёмный фон.
Цикл 8 секунд: два повтора по 4 секунды с одинаковым движением. Анимация идёт по кругу, последний кадр совпадает с первым.
Что происходит в каждом повторе:
— Фото с плашкой «Новинка» закрыто восемью тёмными вертикальными планками
— 0–1,0 с: планки по очереди уезжают через одну: первая вверх, вторая вниз и так далее
— 0–3,2 с: масштаб фото медленно уменьшается со 120% до 100%; 0,7–1,3 с: с пружиной выскакивает плашка «Новинка»
— 2,9–3,1 с: плашка «Новинка» гаснет; 3,1–3,9 с: планки съезжаются обратно
Движение плавное: где что-то появляется или вырастает — с лёгкой пружиной, если в шагах не сказано иначе.
Слова: [«Уже в продаже» и дата запуска]
Цвета: [два hex-кода]
Цифры, которых нет в моих словах, подпиши «пример».

Создай файл effect.html — моушн-эффект «3D-разбор на слои» на HTML, CSS и JavaScript, без библиотек, всё в одном файле, включая шрифты.
Сцена: [1080×1350 для карусели], тёмный фон.
Цикл 8 секунд: два повтора по 4 секунды с одинаковым движением. Анимация идёт по кругу, последний кадр совпадает с первым.
Что происходит в каждом повторе:
— Плоская страница: блок с картинкой, строки текста, кнопка, круглый значок
— 0,1–1,1 с: страница с пружиной наклоняется в 3D и расходится на три слоя: фон, контент, кнопки
— Рядом со слоями по очереди появляются подписи, вся стопка слегка покачивается
— 3,1–3,8 с: слои складываются обратно в плоскую страницу
Движение плавное: где что-то появляется или вырастает — с лёгкой пружиной, если в шагах не сказано иначе.
Слова: [слои Стратегия, Контент, Реклама]
Цвета: [два hex-кода]
Цифры, которых нет в моих словах, подпиши «пример».

Создай файл effect.html — моушн-эффект «Строка под лупой» на HTML, CSS и JavaScript, без библиотек, всё в одном файле, включая шрифты.
Сцена: [1080×1350 для карусели], тёмный фон.
Цикл 8 секунд. Анимация идёт по кругу, последний кадр совпадает с первым.
Что происходит:
— Таблица «Отчёт по кампании» из пяти строк: название и полоска-показатель
— Полупрозрачная лупа-плашка каждые 0,8 секунды с пружиной переезжает на другую строку
— Строка под лупой чёткая и чуть крупнее, остальные размыты и приглушены
Движение плавное: где что-то появляется или вырастает — с лёгкой пружиной, если в шагах не сказано иначе.
Слова: [моя таблица тарифов, лупа останавливается на тарифе Про]
Цвета: [два hex-кода]
Цифры, которых нет в моих словах, подпиши «пример».

Создай файл effect.html — моушн-эффект «Схема воронки» на HTML, CSS и JavaScript, без библиотек, всё в одном файле, включая шрифты.
Сцена: [1080×1350 для карусели], тёмный фон.
Цикл 8 секунд. Анимация идёт по кругу, последний кадр совпадает с первым.
Что происходит:
— Слева узел «Идея», в центре три узла «Email», «Рилс», «Пост», справа узел «Заявки», все соединены плавными линиями
— По линиям непрерывно бегут светящиеся точки от «Идеи» к «Заявкам», один пробег — 1,6 с
— Когда точка доходит до «Заявок», узел коротко пульсирует
Движение плавное: где что-то появляется или вырастает — с лёгкой пружиной, если в шагах не сказано иначе.
Слова: [Подкаст → Нарезка → Пост → Рассылка → Заявки]
Цвета: [два hex-кода]
Цифры, которых нет в моих словах, подпиши «пример».

Создай файл effect.html — моушн-эффект «Логотип из точек» на HTML, CSS и JavaScript, без библиотек, всё в одном файле, включая шрифты.
Сцена: [1080×1350 для карусели], тёмный фон.
Цикл 8 секунд: два повтора по 4 секунды с одинаковым движением. Анимация идёт по кругу, последний кадр совпадает с первым.
Что происходит в каждом повторе:
— Около 80 точек разбросаны по экрану
— 0–1,2 с: точки по очереди слетаются в логотип (два кольца и ромб в центре) с лёгким перелётом
— В углу подпись меняется с «собирается…» на «собран ✓»
— 3,0–3,8 с: точки разлетаются обратно
Движение плавное: где что-то появляется или вырастает — с лёгкой пружиной, если в шагах не сказано иначе.
Слова: [название моего бренда и слоган под ним]
Цвета: [два hex-кода]
Цифры, которых нет в моих словах, подпиши «пример».