Моушен-дизайн в коде: видео весом в килобайты без сервиса, плеера и рекламы
Мы делаем анимационные ролики, которые рисует сам браузер. В них нет видеофайла, встроенного плеера и загрузки на видеохостинг. Ролик вставляется на сайт обычным HTML-блоком, весит как пара абзацев текста и начинает играть вместе с загрузкой страницы. Посмотрите сцену ниже: это не видео, а код.
- Без видеосервиса
- Без плеера и рекламы
- Не замедляет сайт
Это не видеофайл. Сцену выше рисуют SVG и CSS прямо в коде этой страницы. Её текст можно выделить, а ролик продолжает плавно играть даже при медленном интернете.
Почему встроенное видео тормозит сайт, а ролик в коде — нет
Когда на страницу вставляют ролик с видеохостинга, вместе с ним приходит целое приложение: плеер, его скрипты, стили, шрифты, счётчики и реклама. Всё это грузится сразу при открытии страницы, даже если посетитель так и не нажмёт Play. Сравните, как два варианта ведут себя в первые секунды.
Это иллюстрация. Число запросов и вес скриптов зависят от конкретного видеосервиса. Проверить свой сайт можно в PageSpeed Insights, в разделе предупреждений о стороннем коде.
Что загружается вместе с iframe
Код вставки видео выглядит безобидно: одна строка. Но по ней браузер открывает внутри вашей страницы целую чужую страницу. Он скачивает интерфейс плеера, его скрипты и стили, шрифты, модули аналитики и рекламы. Пока всё это загружается и выполняется, основной поток браузера занят, и ваш сайт медленнее откликается на прокрутку и клики.
В отчёте PageSpeed Insights это видно сразу: появляются предупреждения о влиянии стороннего кода и долгом выполнении JavaScript, а оценка скорости падает, особенно на мобильных устройствах.
Как работает ролик в коде
Сцена описана векторными фигурами и CSS-анимацией и приходит вместе с HTML страницы. Она не обращается к другим серверам, не ставит cookies и не показывает рекламу. Браузер анимирует только смещение и прозрачность объектов, поэтому движение плавное и почти не нагружает процессор.
Ролик может просто не загрузитьсяYouTube в России работает с перебоями. Поэтому у части посетителей встроенный ролик остаётся чёрным прямоугольником на самом видном месте страницы. Ролику в коде доступность видеосервисов не важна.
Как видео влияет на показатели скорости
Core Web Vitals — это метрики, которые Google использует при оценке страниц, а Яндекс учитывает удобство сайта для посетителей. Встроенный плеер может ухудшить все три метрики.
Загрузка главного блока
Если видео стоит на первом экране, браузер ждёт плеер и первый кадр. Сцену в коде он рисует сразу, вместе с остальной страницей.
Отклик на действия
Скрипты плеера занимают основной поток браузера, поэтому страница с задержкой реагирует на клики и касания. Анимация в коде основной поток почти не загружает.
Сдвиги макета
Если у iframe не заданы размеры, после загрузки он сдвигает текст и кнопки. У блока с кодом пропорции заданы заранее, и содержимое страницы не прыгает.
Что приходит на сайт вместе с чужим плеером
Бесплатный видеохостинг расплачивается за себя вашим сайтом: его скоростью, вниманием посетителей и контролем над тем, что они видят. Вот что вы получаете в придачу к ролику.
Реклама перед роликом
Видеосервис может показать посетителю чужую рекламу до вашего видео или во время него. На неё вы не влияете.
Похожие видео конкурентов
В конце ролика плеер предлагает «посмотреть ещё», и среди рекомендаций легко оказываются ролики других компаний с теми же услугами.
Чужой интерфейс
Логотип сервиса, его кнопки и заставки встраиваются в ваш дизайн, и один клик уводит посетителя на внешнюю площадку.
Трекеры и cookies
Плеер может собирать данные о посетителях ещё до нажатия Play. Это стоит учитывать в политике обработки персональных данных.
Зависимость от сервиса
Ролик могут ограничить, удалить по жалобе или замедлить вместе со всей площадкой, и важный блок страницы пропадёт без вашего участия.
Тяжёлые скрипты
Даже до запуска видео плеер загружает сотни килобайт кода. Медленнее открывается вся страница, а не только сам ролик.
А ролик в коде — просто часть вашей страницы
У него нет владельца-посредника, рекламы и внешних запросов. Вы сами решаете, что увидит посетитель и куда он нажмёт.
- Ни одного стороннего скрипта и cookie
- Ваши цвета, шрифты и кнопки без чужих логотипов
- Работает, даже если видеосервисы недоступны
- Финал ролика — ваш призыв, а не чужие рекомендации
Какой моушен-ролик в коде можно заказать
Можно начать с одного элемента, например заменить тяжёлое фоновое видео на первом экране, а потом перевести в моушен остальные блоки сайта. Каждый ролик передаётся готовым HTML-блоком для WordPress, Tilda, 1С-Битрикс или любой другой платформы.
Ролик для первого экрана
Заменяет тяжёлое фоновое видео: за 5–10 секунд показывает суть предложения и не задерживает загрузку страницы.
- Сценарий и раскадровка
- Графика в фирменном стиле
- Отдельная версия для телефона
- Вставка на ваш сайт
Анимированный логотип и интро
Логотип собирается при загрузке страницы или оживает при наведении. Это фирменная подпись сайта весом в несколько килобайт.
- Перевод логотипа в вектор
- 2 варианта движения
- Версии для шапки и заставки
Объясняющий ролик-схема
Показывает, как работает услуга или продукт: шаги, путь заказа, принцип действия. Клиенту не нужно читать длинное описание.
- Сценарий из 3–6 сцен
- Цифры и надписи остаются текстом
- Запуск при прокрутке
Комплект для всего сайта
Единая система движения: первый экран, логотип, ролики-схемы, анимированные иконки и кнопки в одном стиле.
- Гайд по анимации бренда
- Набор анимированных иконок
- Замер скорости до и после
Ролик остаётся вашим навсегдаВы получаете готовый HTML-блок, исходные файлы сцены и инструкцию по вставке. Абонентской платы, привязки к сервису и лимита просмотров нет.
Цены ориентировочныеСтоимость зависит от длительности ролика, количества сцен и объектов и от интерактивности. Точную смету и сроки фиксируем после короткого брифа, и в процессе работы цена не меняется.
Как устроен ролик в коде: четыре слоя вместо тысяч кадров
Видеофайл хранит каждый кадр как отдельную картинку: 30 кадров в секунду на 12 секунд — это 360 изображений, сжатых кодеком. Ролик в коде устроен иначе. Он хранит не кадры, а правила: какие фигуры нарисовать и как им двигаться. Каждый кадр браузер просчитывает сам в момент показа, поэтому ролик весит килобайты, а картинка остаётся идеально чёткой.
Фон
Небо, градиенты, мягкие пятна света. Всё рисуется векторными формами, поэтому фон занимает сотни байт, а не мегабайты.
Графика
Иллюстрации, иконки и элементы фирменного стиля в SVG. Они одинаково чёткие на смартфоне и на 4K-мониторе.
Текст
Заголовки, цены и призывы к действию — это настоящий HTML-текст. Его видят поисковые системы, его можно выделить, скопировать и перевести.
Движение
Ключевые кадры в CSS задают, что, куда и за сколько секунд движется. Промежуточные кадры браузер просчитывает сам, плавно и без перекодирования.
Что входит в моушен-дизайн под ключ
Вы получаете не «анимацию ради анимации», а готовый блок. Он встаёт на сайт за несколько минут, не тормозит страницу и одинаково работает на компьютере, планшете и смартфоне. В каждый проект входит:
Сценарий и раскадровка
Решаем, что посетитель должен понять за 5–15 секунд, и раскладываем идею по сценам до начала анимации.
Графика в стиле бренда
Рисуем вектор в ваших цветах и шрифтовой логике: логотип, иконки, иллюстрации, фон. Никаких стоковых шаблонов.
Анимация на SVG + CSS
Движение собирается на стандартных технологиях браузера, без тяжёлых библиотек, плееров и сторонних скриптов.
Мобильная композиция
Для смартфона продумываем отдельную раскладку сцены, чтобы ролик не превратился в мелкую нечитаемую картинку.
Проверка скорости
Тестируем страницу с роликом в PageSpeed Insights и Lighthouse: анимация не должна ухудшать показатели загрузки.
Бережный режим
Если в системе посетителя включено «уменьшение движения», ролик показывает статичный кадр без анимации.
Изоляция стилей
Тема сайта не перекрашивает ролик, а ролик не ломает вёрстку остальных страниц и блоков.
Встраивание и исходники
Ставим блок на сайт сами или даём пошаговую инструкцию. Исходный код остаётся у вас — без подписок и привязки к сервису.
От идеи до ролика на сайте — 6 понятных шагов
Вы заранее знаете, что происходит на каждом этапе и когда будет результат. Сроки ниже — ориентир для типового ролика первого экрана; точный график фиксируем после брифа.
Звонок и бриф
Обсуждаем задачу, сайт, аудиторию и место, где будет стоять ролик. Вы рассказываете о продукте, мы задаём уточняющие вопросы.
Сценарий и раскадровка
Пишем сценарий по секундам и рисуем ключевые кадры. Вы утверждаете смысл до того, как начнётся работа над движением.
Стиль и графика
Отрисовываем сцены в векторе: цвета, формы, типографику. Согласуем статичные кадры, чтобы потом не переделывать анимацию.
Анимация кодом
Оживляем сцены: тайминги, плавность, переходы, зацикливание. Присылаем ссылку на живой черновик — смотреть можно с телефона.
Тесты
Проверяем ролик в Chrome, Safari, Яндекс Браузере и Firefox, на iPhone и Android, замеряем скорость загрузки страницы.
Встраивание
Ставим блок на сайт или передаём код с инструкцией. Проверяем, что ролик корректно выглядит в вашей теме.
Где ролик в коде работает на заявки
Моушен-дизайн полезен там, где посетителю нужно быстро понять суть: что вы продаёте, чем отличаетесь и почему стоит позвонить. Вот сценарии, где он чаще всего срабатывает.
Первый экран
Живая сцена вместо статичного баннера удерживает внимание в первые секунды и сразу объясняет, чем занимается компания.
Объяснение услуги
Схема «как это работает» в движении: этапы, процесс, путь клиента. Сложное становится понятным без длинного текста.
Логотип-интро
Короткое появление логотипа на главной или в шапке страницы — запоминающийся штрих фирменного стиля.
Цифры и инфографика
Растущие графики, счётчики, сравнения. Данные в движении читаются быстрее, чем таблица.
Акции и спецпредложения
Анимированная плашка со скидкой или сезонным предложением. Текст меняется в коде за минуту, видео перевыпускать не нужно.
Живой фон секций
Медленно плывущие формы и градиенты за контентом добавляют глубины, не отвлекают от текста и почти ничего не весят.
Есть идея ролика или пока только задача? Позвоните или напишите в Telegram — за 10–15 минут разговора подскажем формат, сроки и ориентир по цене.
iframe, MP4, GIF, Lottie или код: что выбрать для сайта
Все пять способов показывают движение, но по-разному влияют на скорость страницы, SEO и восприятие бренда. Вес указан как типичный ориентир для ролика на 10–15 секунд; реальные цифры зависят от длительности и качества.
| Критерий | iframe (YouTube, VK, Rutube) | MP4 на хостинге | GIF | Lottie | Код SVG + CSS |
|---|---|---|---|---|---|
| Вес на странице | От 1 МБ: плеер и скрипты | 5–30 МБ | 2–15 МБ | 50–300 КБ + библиотека ≈250 КБ | 5–30 КБ |
| Запросы к чужим серверам | Десятки: плеер, статистика, реклама | Нет | Нет | Библиотека с CDN или в сборке | Ноль |
| Реклама и чужие рекомендации | Возможны, в том числе ролики конкурентов | Нет | Нет | Нет | Нет |
| Чёткость на экранах 2K–4K | Зависит от скорости интернета | Растр, артефакты сжатия | 256 цветов, «лесенка» | Вектор | Вектор |
| Текст индексируется | Нет | Нет | Нет | Как правило, нет | Да, это HTML/SVG-текст |
| Влияние на скорость (LCP) | Сильное | Сильное | Сильное | Среднее | Минимальное |
| Стабильный показ в России | YouTube — с перебоями | Да | Да | Да | Да |
| Правка текста или цены | Перемонтаж и перезаливка | Перемонтаж и экспорт | Новый экспорт | Правка в After Effects и экспорт | Одна строка в коде, минуты |
| Реакция на курсор и прокрутку | Нет | Нет | Нет | С дополнительным JS | Да, средствами CSS |
Из чего складывается цена ролика
Вы платите не за минуты видео, а за работу специалистов: сценарий, графику, анимацию и проверку. Распределение примерное, для типового ролика первого экрана.
Что влияет на стоимость
- Количество сцен и длительность ролика
- Сложность иллюстраций и персонажей
- Отдельная композиция для смартфона
- Интерактив: реакция на наведение и прокрутку
- Несколько вариантов, например под разные акции
- Срочность запуска
Перед звонком: что держать под рукой
Чем точнее вводные, тем быстрее мы назовём срок и цену. Ничего из этого не обязательно — но каждый пункт экономит время на старте.
Чек-лист заказчика
- Ссылка на сайт и страница, где будет стоять ролик
- Логотип в векторе и фирменные цвета, если они есть
- Главная мысль: что посетитель должен понять за 10 секунд
- Тексты для ролика: заголовок, цифры, предложение
- Примеры анимаций, которые вам нравятся, пусть даже из других сфер
- Желаемый срок запуска и ориентир по бюджету
- Платформа сайта: WordPress, Tilda, 1С-Битрикс или другая
Тревожные сигналы при выборе исполнителя
- Предлагают GIF или тяжёлый MP4 и называют это «анимацией в коде»
- Для показа ролика нужно подключить сторонний сервис или платную подписку
- Не могут сказать, сколько будет весить готовый блок
- Исходный код не передают или дают только ссылку на чужую платформу
- Не проверяют ролик на смартфонах и в Safari
Частые вопросы о моушен-дизайне в коде
Чем ролик в коде отличается от обычного видео?
Сколько стоит моушен-дизайн в коде?
Сколько времени занимает создание ролика?
Подойдёт ли ролик для WordPress, Tilda или 1С-Битрикс?
Не замедлит ли анимация загрузку сайта?
Можно ли превратить готовое видео в код?
Будет ли ролик работать на телефонах?
Можно ли потом самостоятельно менять текст и цвета?
Закажите ролик в коде — лёгкий, быстрый, без чужих плееров
«Крым ТОП» создаёт моушен-дизайн для сайтов в Симферополе, Севастополе и по всему Крыму, а также работает удалённо по всей России. Позвоните или напишите в Telegram: обсудим задачу, предложим формат и назовём ориентир по срокам и цене.