Разработка · Санкт-Петербург

Анимация по скроллу на сайте

Объект поворачивается, раскрывается, разбирается на части — и всем этим управляет ваша прокрутка. Тот самый эффект, который обычно называют «как у Apple». Технически это не видео и не 3D-сцена, а последовательность заранее отрендеренных кадров: поэтому она предсказуема по весу, работает на телефонах и стоит в разы дешевле сцены, которую устройство считает в реальном времени.

35 000рублей — от этой суммы надбавка к сайту; материал считается отдельной строкой

100–300кадров в секвенции: их число задаёт и плавность движения, и вес страницы

40+проектов с 2024 года; ИП, договор, фиксированная смета

Получить предварительную смету Посмотреть, как это устроено

Суть

Если коротко, без терминов

Это не видеофайл и не 3D-сцена в браузере, а последовательность заранее отрендеренных кадров: номер кадра считается от того, насколько далеко вы прокрутили страницу. Остановились — картинка замерла, отмотали назад — объект повернулся обратно.

Шесть ответов сразу

Что это. Движение объекта на странице, привязанное к прокрутке
Как сделано. Последовательность кадров, обычно 100–300 штук
Кому. Тем, у кого есть что показать: изделие, устройство, комплект, процесс
Сколько. От 35 000 ₽ надбавкой к сайту, материал — отдельной строкой
Когда. Веб-часть — несколько рабочих дней, срок материала называю до начала
Где живёт. На Тильде и на чистом коде одинаково; тексты и цены правите сами

Разграничение

Три разные вещи под одним названием

Под словами «анимация по скроллу» на рынке продают три разные вещи, и сравнить предложения невозможно, пока не понимаешь, что именно тебе предлагают. В девяти случаях из десяти так называют появление элементов при прокрутке: заголовок выплыл, карточка выехала снизу. Это штатная возможность любой платформы, отдельная услуга под неё не нужна. Здесь речь о другом — о покадровом движении объекта.

Появление элементов

Что делает: Блоки выезжают и проявляются при прокрутке
Как сделано: Штатные настройки платформы
Можно потрогать пальцем: Нет
Вес: Почти нулевой
На слабом телефоне: Работает
Цена: Входит в сборку сайта

Секвенция кадров

Что делает: Объект поворачивается и раскрывается
Как сделано: Заранее отрендеренные картинки
Можно потрогать пальцем: Нет
Вес: Предсказуемый, задаётся числом кадров
На слабом телефоне: Работает, если сделан отдельный мобильный вариант
Цена: От 35 000 ₽ надбавкой к сайту

3D-сцена в браузере

Что делает: Объект живёт в реальном времени
Как сделано: Сцена считается на устройстве посетителя
Можно потрогать пальцем: Да
Вес: Зависит от модели
На слабом телефоне: Зависит от устройства
Цена: От 120 000 ₽

Почему секвенция дешевле сцены: вся тяжёлая работа сделана заранее, на моём компьютере. Браузеру посетителя остаётся показывать готовые изображения, а не считать объект в реальном времени. Отсюда и предсказуемость — что отрендерено, то и увидят все, независимо от того, какой у человека телефон. Чем это отличается от сцены на Three.js, разбираю на отдельной странице про 3D-сайты.

Материал

Откуда берутся кадры

Три источника; выбор идёт от того, что у вас уже есть. Материал — отдельная строка сметы, и его стоимость я называю до начала работ, а не в конце.

Рендер 3D-модели

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

Съёмка реального объекта

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

Генерация нейросетями с ручной чисткой

Работает для абстрактных и фоновых сцен, где не нужна точность до миллиметра. Дешевле и быстрее двух первых. Для точного показа конкретного изделия не годится — форма поплывёт, и это будет заметно.

Если нет ничего

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

Показать, что есть, и посчитать

Применение

Что можно показать таким способом

Практическое правило: если движение можно записать на видео от начала до конца и оно всегда одинаковое — подходит секвенция. Если посетитель должен сам выбирать, что произойдёт, — нужна 3D-сцена. Интерактива здесь нет: покрутить объект пальцем, кликнуть на деталь или выбрать цвет не получится, прокрутка работает только вперёд и назад.

Продукт со всех сторон

Поворот на 360 градусов, которым управляет прокрутка.

Устройство изнутри

Корпус раскрывается, видны узлы и то, из чего собрано изделие.

Сборка или разборка

Этапы монтажа, состав комплекта, порядок действий.

Процесс

Как работает механизм и как проходит услуга — по шагам.

Превращение

Было и стало: до и после ремонта, до и после сборки.

Атмосферный фон первого экрана

Движение, которое держит внимание и не отвлекает от текста.

Скорость

Вес и скорость — цифрой, а не обещанием

Главный страх звучит одинаково: «красиво, но будет тормозить». Отвечаю на него числом. Ни на одной странице, которую я разбирал, готовясь к этой, не названо ни веса эффекта, ни времени загрузки, ни обещания померить: продаётся ощущение, а за скорость никто не подписывается.

Что определяет вес и что я с этим делаю

Число кадров — главный множитель: больше кадров означает плавнее движение и тяжелее страницу
Разрешение каждого кадра и формат сжатия — вторая половина веса
Стратегия загрузки: первые кадры приходят сразу, остальные подтягиваются по мере прокрутки
Отдельный мобильный вариант: меньше кадров и меньше разрешение, а не та же секвенция на телефоне
Мобильное движение проектируется заранее, а не обрезается в последний день перед сдачей
Вес секвенции и время загрузки первого экрана называются числом до сдачи и фиксируются в переписке

Если замер окажется хуже согласованного — довожу, а не сдаю. Чего не гарантирую: что эффект поднимет конверсию. Движение на странице — это внимание, а не заявка; за заявку отвечает предложение. Расскажите задачу — скажу, в какой вес она уложится.

Платформа

Работает ли это на Тильде

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

Что получаете

Секвенция ставится своим кодом в отдельный блок и живёт рядом с обычными блоками Тильды
Тексты, формы и цены вы правите сами, как привыкли, — трогать код для этого не нужно
Мобильный вариант движения собирается сразу, а не «если останется время»
Аккаунт и домен оформлены на вас с самого начала, доступы у вас
На чистом коде тонкой настройки загрузки больше, но для посетителя разница почти не видна — разработка на чистом коде

Границы, о которых предупреждаю

Штатная пошаговая анимация Тильды на мобильных по умолчанию выключена — так задумано платформой, чтобы слабые устройства не задыхались. Если вы уже видели «на компьютере двигалось, на телефоне нет», причина обычно эта
Правки движения делаются в коде блока, а не мышкой в редакторе: изменить траекторию или скорость сами вы не сможете. Всё остальное на странице — сможете
Экспорт отдаёт статичную копию: кадры и код блока уезжают вместе со страницей, это ваши файлы, но экспортированная копия дальше в Тильде не редактируется
Если сайта ещё нет, начинать надо с него, а не с эффекта — разработка на Tilda

Отсечка

Когда вам это не нужно

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

Показывать нечего

Услуга без предмета и без видимого результата: бухгалтерия, страхование, юридическая консультация. Крутить в воздухе абстрактную фигуру можно, но это украшение, а не аргумент. Начните с внятного первого экрана и предложения.

Лендинг под ключ

Нужно появление блоков при прокрутке

Это входит в сборку любого сайта, который я делаю, и отдельных денег не стоит. Справка Тильды прямо говорит, что базовой анимации — появление, параллакс, фиксация — хватает в девяти случаях из десяти. Если вам показывали именно такой эффект и называли его «анимацией по скроллу», не переплачивайте.

Посетитель должен взаимодействовать с объектом

Выбрать цвет, повернуть пальцем, кликнуть на деталь и увидеть подпись — секвенция этого не умеет по устройству. Это 3D-сцена в браузере и другая смета.

Бюджет меньше надбавки

Тогда разумный порядок такой: сначала работающий сайт, эффект — вторым заходом, когда он окупится вниманием. Визитка от 15 000 ₽, лендинг от 45 000 ₽ — и это не «урезанный» вариант, а нормальный запуск. А если хочется просто понять, стоит ли эффект своих денег, есть консультация 5 000 ₽ за час, и её стоимость вычитается, если заказываете работы у меня.

Консультация с разбором

Сайт уже готов, и нужна только эта доработка

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

Сопровождение сайта

Сроки горят

Материал — рендер или съёмка — это не веб-работа, и ускорить её деньгами получается плохо. Если запуск через неделю, эффект лучше отложить, а не делать наспех: наспех он и будет выглядеть.

Стоимость

Сколько стоит

Срок считается от момента, когда согласована раскадровка и есть материал. Цена фиксируется в договоре и дальше не растёт.

Видео по скроллу — надбавка к сайту

Ставится на сайт, который я делаю с нуля, или на сайт, который у меня на продвижении либо сопровождении.

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

от 35 000 ₽

Веб-часть — несколько рабочих дней. Съёмка объекта или моделирование, если материала нет, считается отдельной строкой и зависит от подрядчика; сумму называю до подписания. Срок — ориентир, а не гарантия.

Получить предварительную смету

80 000рублей и выше — бюджет запуска целиком на Тильде: лендинг 45 000 ₽ плюс надбавка

95 000рублей и выше — то же на чистом коде: лендинг от 60 000 ₽ плюс надбавка

5 000рублей за час консультации с разбором задачи; созвон в течение 2 рабочих дней

Что влияет на цену: число кадров, откуда они берутся, сколько сцен на странице, нужен ли отдельный мобильный вариант движения. Если материала нет, его стоимость добавляется к смете и называется до подписания, а не в конце. Если бюджет меньше — скажу, с чего разумнее начать в вашей ситуации, а не буду продавать всё сразу. Все цены · Сайт под SEO

Цена вопроса

Почему это не 500 рублей

На биржах такие объявления действительно есть: «анимация для сайта от 500 ₽», «анимирование от 1 800 ₽ за услугу». Это не обман — за эти деньги вам сделают движение. Разница в том, что не входит.

За 500–1 800 ₽ на бирже

Движение по вашему описанию — его действительно сделают
Раскадровки нет: что и в каком порядке показывать, решаете вы сами
Отдельного мобильного варианта нет
Оптимизации кадров под вес нет
Замера и ответственности за скорость страницы нет
Через полгода вернуться будет не к кому

Здесь

Движение, собранное под ваш продукт и вашу страницу
Раскадровка: решение, что именно и в каком порядке показывать
Отдельный мобильный вариант движения, спроектированный заранее
Оптимизация кадров под вес: сжатие, форматы, разрешения
Замер и ответственность за скорость страницы — числом до сдачи
Человек, к которому можно вернуться через полгода: ИП, договор, переписка

Как понять, что нужно вам. Если задача — оживить фон и ничего не сломается, когда на телефоне эффект отключится, берите дешёвый вариант: он честно закрывает задачу. Если эффект стоит на первом экране и продаёт продукт — за него кто-то должен отвечать цифрой. Обратная сторона тоже правда: за сайт с таким эффектом агентства просят от 90 000 до 180 000 ₽ и продают его только целиком, отдельной строки «добавить эффект» у них нет. Я работаю один, поэтому строка есть. Обо мне

Процесс

Как проходит работа

Раскадровка

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

Материал

Рендер, съёмка или генерация. Если нужен подрядчик, называю его сумму и срок отдельной строкой заранее.

Оптимизация кадров

Сжатие, форматы, раскладка по разрешениям — отдельно для компьютера и для телефона.

Сборка

Привязка движения к прокрутке: сначала компьютер, затем отдельно мобильный вариант.

Замер и сдача

Скорость и вес — цифрой. Что вошло в замер, видно в отчёте: верить мне на слово не нужно.

Несколько рабочих дней — это веб-часть: шаги три, четыре и пять. Первый шаг зависит от того, как быстро вы согласуете раскадровку, второй — от того, откуда берутся кадры. Оба срока называются до старта, а не по ходу. Если ответ на согласование занимает неделю, срок проекта сдвигается ровно на неделю, и я предупрежу об этом сразу. Сроки — ориентир, а не гарантия.

Обсудить проект

Ваша сторона

Что нужно от вас и что остаётся у вас

Времени с вашей стороны уходит немного — ориентировочно два-три часа на весь проект.

Что нужно от вас

Понимание, что показываем: не сценарий и не текст, а ответ на вопрос «какая деталь продукта убеждает покупателя». Дальше раскадровку рисую я
Материал, если он есть: 3D-модель, чертежи, фотографии, старые рендеры — что угодно, даже плохого качества, по ним видно форму
Сам предмет, если решили снимать
Согласование раскадровки — один заход, обычно полчаса
Чего не нужно: писать техническое задание, разбираться в форматах, выбирать библиотеку анимации и вообще произносить слово «секвенция»

Что остаётся у вас

Две итерации по движению входят в работу после сдачи: изменить траекторию означает перерендерить кадры, это отдельная работа, а не пять минут
Правки текста, цен и картинок рядом с эффектом не в счёт — их вы делаете сами и сколько угодно
Секвенция живёт в отдельном блоке и на остальную страницу не влияет; аккаунт и домен оформлены на вас с самого начала
Свои ошибки исправляю бесплатно: если после сдачи выяснилось, что на каком-то устройстве движение сломано, это моя работа и мои сроки
Если расстаёмся — все кадры в исходном разрешении, код блока и раскадровка остаются у вас. Это обычные файлы, любой веб-разработчик подхватит их без меня; неотработанная предоплата возвращается

Риски

Что может пойти не так

Называю конкретно, потому что на этом рынке об этом молчат.

Материал окажется дороже эффекта

Самый частый сценарий: модели нет, снимать нечем, а моделирование стоит больше веб-части. Проверяю это на разборе, до сметы.

Движение не понравится после рендера

Раскадровка на бумаге и готовые кадры выглядят по-разному. Поэтому первый черновой прогон делается в низком качестве и быстро: смотреть на движение дешевле, чем на красивую картинку.

Эффект не даст того, чего вы от него ждали

Движение удерживает внимание, но не заменяет предложение. Если заявок мало из-за цены или непонятного оффера, секвенция это не починит.

Вы захотите интерактив уже в процессе

«А можно ещё кликнуть на деталь?» — можно, но это переход в 3D-сцену и другая смета. Скажу об этом сразу, а не после того, как сделаю.

Вопросы

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

Сколько стоит анимация по скроллу на сайте?

От 35 000 ₽ надбавкой к сайту. Точная сумма — после раскадровки: цена зависит от числа кадров и от того, откуда они берутся. Материал, если его нет, считается отдельной строкой и называется до подписания.

Это будет тормозить на телефоне?

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

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

Можно, и так делают. Браузеры выполняют перемотку неровно: она не рассчитана на десятки обращений в секунду. В публичном разборе такого внедрения на части андроидов видео просто не запускалось, на айфоне в режиме энергосбережения поверх ролика показывался значок «плей», а при быстрой прокрутке шли рывки и пропуски. Помогло разбиение на кадры: вес упал, движение стало плавнее.

Сколько кадров нужно?

Обычно 100–300: меньше — движение рваное, больше — растёт вес без заметного выигрыша. Точное число подбирается под конкретное движение и отдельно для мобильного варианта.

Можно ли покрутить объект пальцем?

Нет, движением управляет только прокрутка — вперёд и назад. Интерактив, где посетитель сам выбирает, что произойдёт, — это уже 3D-сцена в браузере и другие деньги.

У меня нет 3D-модели и нет возможности снимать

Тогда остаётся генерация с ручной чисткой — подходит для фоновых и абстрактных сцен. Для точного показа конкретного изделия она не годится, и я скажу об этом прямо, а не сделаю «примерно похоже».

Поисковики это увидят?

Сама секвенция для них — набор картинок. Текст, который должен ранжироваться, ставится рядом обычной разметкой: заголовки и абзацы остаются обычным текстом страницы, и на индексацию эффект не влияет.

Сколько правок входит?

Две итерации по движению после сдачи. Изменить движение — значит перерендерить кадры, поэтому такие правки считаются штуками, а не «безлимитом». Тексты и картинки правите сами и сколько угодно.

Сколько это займёт по времени?

Веб-часть — несколько рабочих дней. Материал зависит от источника: рендер по готовой модели быстро, съёмка и моделирование дольше. Для сравнения: полноценный промо-сайт «как у Apple» команда из трёх человек делала месяц, а сами авторы советуют закладывать три. Здесь объём другой — одна сцена, а не двадцать, отсюда и разница.

Можно добавить эффект на мой существующий сайт?

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

Работаете официально?

ИП Колесов Илья Сергеевич, Санкт-Петербург: договор, счёт, закрывающие документы. Работаю с 2024 года, 40+ проектов. Смета фиксированная, аккаунт и домен оформлены на вас.

Посчитаю для вашего проекта. Расскажите, что нужно показать, и покажите, какой материал есть — модель, фотографии, чертежи. В ответ скажу, сколько кадров нужно, откуда их взять и во что это обойдётся, включая материал. Если увижу, что эффект вашему проекту ничего не добавит, скажу об этом прямо.

Посчитать для моего проекта

Made on

Tilda