Сайт с анимацией: пример, где турбина разбирается при прокрутке

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

кадр 001 / 240 пример сайта Хочу такую анимацию

Турбина под ваш мотор

Тюнинг-ателье «Наддув» ставит турбину на атмосферный мотор или меняет штатную на производительную. Мощность и срок называем до начала работ.

Разбор по оси

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

190 000

об/минСкорость вала

На таких оборотах важен каждый грамм, поэтому картридж балансируем на стенде до установки.

1,8

барДавление наддува

Пиковое давление задаём прошивкой и проверяем датчиком на заезде, на каждой передаче.

950

°CНа входе турбины

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

+120

л. с.Прирост мощности

Замеряем на диностенде до и после установки. Протокол с графиком мощности отдаём вам на руки.

Сборка и проверка

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

12

месяцевГарантия

На работы и детали из нашего комплекта, без ограничения пробега.

Установка турбины

  1. Диагностика моторадень 1
  2. Подбор турбиныдень 1
  3. Балансировка картриджадень 2
  4. Давление наддувадень 2
  5. Коллектор и термоэкрандень 3
  6. Прошивка и диностенддень 4
  7. Выдача и гарантиядень 5

этап 1 из 7

Турбина под ваш моторлистайте — разберём её по оси

Разбор по осикаждую деталь моем и меряем

190 000об/минскорость вала, балансировка на стенде

1,8бардавление наддува задаём прошивкой

950°Cтемпература на входе турбины

+120л. с.прирост мощности, замер на диностенде

Сборка и проверказатяжка, люфт вала, пробный заезд

Гарантия 12месяцевна работы и детали из комплекта

кадр
001 / 240
Турбина
под ключ за пять дней

От диагностики до замера на диностенде — в одном месте и по одной смете. Сумму и прирост мощности называем до начала работ, а не по факту.

Этапы установки

  1. день 1Диагностика мотора

    Компрессия, эндоскопия цилиндров, ошибки блока управления. Если мотор не готов к наддуву, говорим сразу.

  2. день 1Подбор турбины

    Под объём, обороты и задачу: город, трасса или трек. Показываем карту компрессора, а не каталог.

  3. день 2Балансировка картриджа

    Вал и крыльчатку проверяем на стенде: на 190 000 об/мин любой дисбаланс съедает подшипники.

  4. дни 2–3Коллектор, интеркулер, патрубки

    Монтаж, термоэкран на горячую часть, проверка на утечки воздуха и масла.

  5. день 4Прошивка

    Давление наддува, топливо и зажигание под новую турбину. Пиковое давление — не выше 1,8 бар.

  6. день 5Диностенд и выдача

    Замер до и после, протокол с графиком мощности и рекомендации по обкатке.

Что проверяем перед выдачей

  • Люфт вала турбины: осевой и радиальный
  • Давление наддува на каждой передаче
  • Температуру газов на прогоне под нагрузкой
  • Утечки масла и воздуха по всем соединениям
  • Ошибки блока управления после заезда

Гарантия

12месяцев
на работы

И на детали из нашего комплекта, без ограничения пробега. Если что-то пошло не так, машину забираем на стенд за свой счёт.

Это был пример сайта с анимацией. Ателье «Наддув», турбина и цифры придуманы для демонстрации, кадры ролика сгенерированы. Для вашего товара сделаю такую же сцену на ваших кадрах — ниже, как устроен пример, что должно быть на таком сайте и сколько он стоит.

Хочу такую анимацию
Как сделано

Как устроен этот пример сайта с анимацией

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

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

Что внутри примера

  • Кадры. 240 кадров 810×1440 — вертикальный ролик: он быстрый, и частые кадры не дают движению рваться. Каждый кадр — отдельный файл, все загружены в Тильду как обычные картинки
  • Вес. Все кадры вместе — около 6,7 МБ. Первый появляется сразу, остальные догружаются по ходу прокрутки, по несколько файлов разом
  • Tilda и код. Сцена стоит в блоке с кодом и так же работает на самописном сайте: движок, стили и кадры от конструктора не зависят
  • Телефон. Вертикальный ролик встаёт во весь экран по высоте, подпись — полосой под ним и товар не закрывает
  • Компьютер. По бокам от ролика — расшифровка цифр и этапы работы, они меняются вместе с планом
  • Выноски. Английские цифры вшиты в кадр, русские подписи набраны обычным текстом: их правят без пересборки кадров
  • Откуда кадры. Сгенерированы: турбина вымышленная, точная копия конкретной модели для демонстрации не нужна
Структура

Что должно быть на сайте с анимацией

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

01

Первый экран: что это и для кого

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

02

Одна сцена про главное

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

03

Цифры текстом, а не картинкой

Три-пять чисел, ради которых покупают: параметры, срок, результат. Набранные текстом, они видны поисковику и правятся без пересборки кадров.

04

Порядок работы и сроки

Если вы продаёте услугу — этапы по дням, как справа от ролика в примере. Клиент видит, за что платит, ещё до звонка.

05

Цена или хотя бы «от»

Цена рядом с эффектом снимает главный вопрос. Если точную назвать нельзя — что на неё влияет и как её узнать за один звонок.

06

Гарантия и доказательства

Гарантийные условия, протоколы, фото работ, отзывы, реквизиты. Анимация притягивает внимание, а решение принимают по этим блокам.

07

Короткая заявка

Кнопка на экране сцены и форма в конце: имя, телефон, мессенджер. Длинная анкета после красивой сцены теряет людей.

08

Отдельная версия для телефона

Большая часть переходов идёт с телефона: вертикальный ролик, подпись под кадром, вес кадров под мобильную сеть. Поэтому в примере ролик вертикальный.

Чего на таком сайте быть не должно

  • Анимации на каждом блоке: глаз устаёт, и главное теряется среди второстепенного
  • Ролика в десятки мегабайт, который грузится раньше текста и кнопки
  • Цифр и условий только внутри кадра — поисковик их не прочитает, а поправить их можно только переделкой
  • Прокрутки, которая перехватывает страницу и не даёт листать дальше
  • Эффекта вместо ответов на вопросы «сколько», «когда» и «как заказать»
  • Одинаковой сцены на компьютере и телефоне, если на узком экране товар не виден
Кому подойдёт

Кому нужен дизайн сайта с анимацией

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

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

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

Сайт-каталог от 30 000 ₽

Производитель техники и деталей

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

Сайт для завода и производства

Магазин с флагманским товаром

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

Интернет-магазин от 40 000 ₽

Когда анимация лишняя

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

Видео или 3D: что выбрать
Как идёт работа

Этапы и сроки: как я делаю сайт с анимацией

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

01

Задача и раскадровка

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

02

Материал для кадров

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

03

Структура, тексты, дизайн

Блоки из раздела выше под вашу нишу: первый экран, цифры, этапы, цены, заявка. Макет для компьютера и телефона согласуем до сборки.

04

Сборка и привязка к прокрутке

Кадры сжимаю и раскладываю по одному на файл, отдельно готовлю вариант для телефона. Сайт — на Tilda или на коде, по задаче.

05

Замер и сдача

Проверка на телефонах и компьютерах, вес и скорость страницы — цифрой, с отчётом. Доступы остаются у вас.

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

Стоимость

Сколько стоит сайт с такой анимацией

Анимация — надбавка к сайту, а не отдельный продукт: сначала нужен сам сайт, на котором она встанет. Цена фиксируется в договоре и дальше не растёт.

27 000рублей и выше — лендинг на Tilda с анимацией: 15 000 ₽ за лендинг плюс надбавка
32 000рублей и выше — тот же лендинг на чистом коде: 20 000 ₽ плюс надбавка
30 000рублей — сайт-каталог на Tilda для сервиса или производства: фильтры, поиск, запрос цены, до 50 позиций

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

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

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

от 12 000 ₽

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

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

Интернет-магазин на Tilda с корзиной и оплатой — от 40 000 ₽, на коде — от 85 000 ₽. Если объект нужно вращать пальцем, а не прокруткой, это 3D-сцена — от 40 000 ₽. Чем видео отличается от 3D и когда какой иммерсивный сайт выбрать, — на странице иммерсивных сайтов. Если бюджет меньше, скажу, с чего разумнее начать в вашей ситуации, а не буду продавать всё сразу. Все цены · Лендинг · Видео по скроллу

Вопросы

Частые вопросы про сайты с анимацией

Сколько времени занимает сайт с такой анимацией?

Лендинг — от 7 дней, видео по скроллу добавляет несколько рабочих дней веб-части. Дольше всего обычно материал: рендер по готовой модели делается быстро, съёмка и моделирование — дольше. Оба срока называю до старта, и если согласование займёт неделю, предупрежу сразу, что срок сдвинется.

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

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

Можно сделать сайт с такой анимацией на Tilda?

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

Откуда взять ролик или 3D-модель?

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

Что делать, если нет фото товара?

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

Как такая страница покажет себя в поиске?

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

Примеры

Ещё сайты с анимацией: примеры для других ниш

Каждый пример — свой товар и свой дизайн: приём подстраивается под нишу, а не повторяет один шаблон. Бренды придуманы для демонстрации — так может выглядеть сайт вашего товара, ресторана или жилого комплекса.

Промо-сайт товара

Городской рюкзак раскрывается, вещи вылетают из отделений и висят в воздухе.

Пример промо-сайта

Лендинг кроссовок

Беговой кроссовок раскладывается на подошву, пену, стельку и шнурки.

Лендинг кроссовок

Лендинг ЖК

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

Лендинг ЖК

Как устроена технология

Откуда берутся кадры, сколько весит сцена и чем видео по скроллу отличается от 3D.

Видео по скроллу

Нужен такой же приём для вашего товара? Пришлите, что есть: фотографии, 3D-модель, чертежи. Скажу, сколько кадров нужно, откуда их взять и во что обойдётся сайт целиком.

Обсудить свой сайт
Made on
Tilda