Пример промо-сайта товара: рюкзак раскрывается при прокрутке

Прокрутите страницу — рюкзак раскроется, вещи вылетят наружу и вернутся на место. Бренд «Кочевник» придуман для примера: так может выглядеть промо-сайт вашего товара. Ниже — как устроена эта демонстрационная страница, что должно быть на таком сайте и сколько он стоит.

7 490 ₽

Кочевник 25литров
на весь день

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

Прокрутите — рюкзак откроется

25л

Помещается весь день

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

16″

Отделение для ноутбука

С мягкой спинкой: ноутбук не касается дна и не бьётся о ключи.

6кармашков

Органайзер спереди

Зарядка, ключи, наушники и блокнот — у каждой мелочи своё место.

0,75л

Боковой карман

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

7вещей

На весь день — и у каждой своё место

Ноутбук, худи, наушники, бутылка, пауэрбанк, ключи и блокнот.

900D

Ткань не промокает

Плотный полиэстер с водоотталкивающей пропиткой, молнии с защитой от воды.

0,9кг

Лёгкий на плечах

Мягкие лямки и спинка. Размер 45 × 30 × 15 см.

Всёсобрано

Можно выходить из дома. Доставка по России за 2–5 дней, 14 дней на возврат.

Каждой вещи — своё место

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

Отделение для ноутбука

16″

С мягкой спинкой. Ноутбук не касается дна рюкзака.
Боковой карман

0,75 л

Для бутылки или зонта. Держит на резинке, не выпадает.
Органайзер

6

Шесть кармашков: зарядка, ключи, наушники, ручки и блокнот.
Лямки

5 см

Широкие, с мягкой подкладкой и грудной перемычкой: вес ложится на плечи ровно.

Доставка и гарантия

2–5дней

Доставка СДЭК или Почтой по всей России. По Москве и Петербургу — курьером на следующий день.

2года

Гарантия на молнии и фурнитуру. Если что-то сломалось — заменим.

14дней

Не подошёл — вернём деньги. Главное, чтобы рюкзак был чистым и с бирками.

45 × 30 × 15 см0,9 кг25 литровполиэстер 900D

Кочевник 25

Городской рюкзак на 25 литров для ноутбука, сменной одежды и всего, что нужно до вечера.

7 490 ₽

Доставка 2–5 дней · 14 дней на возврат

Бренд «Кочевник» придуман для примера — так может выглядеть страница вашего товара. Как устроен этот пример

Пример

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

Это товарный лендинг, где главную работу делает первый экран: вместо галереи фотографий — движение, которое посетитель запускает прокруткой сам. Всё остальное устроено как у любого сайта одного товара: детали, доставка, цена и кнопка заказа.

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

Что в этом примере

Товар на весь экран: секвенция из 90 кадров, прокрутка выбирает, какой кадр показать
Движение туда и обратно: раскрытие, пауза раскрытым, сборка
Выноски появляются по ходу движения и указывают на свою деталь
Полоса внизу экрана отмечает, какие вещи уже показаны
Меню перематывает к нужной сцене, кнопка заказа объясняет, что магазин придуман для примера
Отдельная раскладка для телефона: товар крупнее, текст под ним

Как сделан

Исходник — ролик на восемь секунд, кадры сгенерированы. Бренд и товар придуманы для демонстрации, поэтому точность деталей здесь не важна
Ролик разложен на 90 кадров по движению, а не по времени: в начале пауза, чтобы товар успели рассмотреть закрытым
Каждый кадр 1600×900 — отдельный файл, всего 2,0 МБ на всю анимацию. Файлы загружены в Тильду и приходят с её серверов
Первый кадр появляется сразу, остальные догружаются по порядку, пока страницу листают
Номер кадра считается от доли прокрутки: остановились — картинка замерла, прокрутили назад — вещи вернулись на место
Код стоит в одном блоке Tilda рядом с обычными блоками: тексты и цены правятся как всегда. Тот же код работает и на сайте на чистом коде

Как это будет с вашим товаром

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

Структура

Что должно быть на промо-сайте товара

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

Первый экран с товаром

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

Детали, за которые выбирают

Три–шесть выносок с цифрами. Не всё подряд, а то, чем товар отличается от соседа в каталоге. Каждая выноска появляется, когда видна её деталь, и не спорит с движением.

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

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

Доверие

Доставка, гарантия, возврат, отзывы, фото в жизни. Без этого блока красивый первый экран работает на любопытство, а не на заказ.

Цена и одно действие

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

Скорость и телефон

На промо-сайт чаще приходят с телефона — из рекламы и соцсетей. Поэтому вес кадров и мобильная раскладка — часть структуры, а не доделка в конце.

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

Кому подойдёт

Для каких товаров подходит такая анимация

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

Подходит

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

Лучше другой формат

Сотни позиций — это интернет-магазин, а движение можно поставить на его главную
Товару нечего раскрывать: движение ради движения внимание не удержит — хватит хороших фотографий и обычного лендинга
Бюджет пока меньше надбавки: запускаем лендинг от 15 000 ₽, эффект добавляем вторым заходом

Как идёт работа

Разработка промо-сайта: этапы и сроки

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

Разбор товара и раскадровка

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

Материал

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

Тексты и дизайн

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

Кадры и сборка

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

Замер и запуск

Вес и скорость страницы — цифрой до сдачи. Домен, Метрика с целями, доступы остаются у вас, тексты и цены дальше правите сами.

Сроки. Лендинг — от 7 рабочих дней, на Tilda обычно 7–12. Видео по скроллу добавляет несколько рабочих дней на веб-часть. Срок материала зависит от того, откуда берутся кадры, и называется до старта.

Стоимость

Сколько стоит промо-сайт товара

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

Лендинг одного товара с видео по скроллу

С похожей анимацией и целой страницей товара: товар на первом экране, анимация при прокрутке, выноски и блоки, без которых товар не закажут.

Текст и дизайн лендинга, SEO, Метрика с целями, домен
Раскадровка: что раскрывается, в каком порядке, где пауза
Подготовка кадров и сборка секвенции — отдельно компьютер, отдельно телефон
Выноски и блоки товара: состав, доставка, гарантия, заказ
Замер веса и скорости страницы до сдачи

от 27 000 ₽

На Tilda: лендинг от 15 000 ₽ плюс видео по скроллу от 12 000 ₽ надбавкой. На чистом коде — от 32 000 ₽. Материал, если его нет, считается отдельной строкой.

Посчитать мой промо-сайт

15 000рублей — лендинг одного товара на Tilda без эффекта; на коде от 20 000 ₽

12 000рублей — надбавка за видео по скроллу к любому сайту

30 000рублей — сайт-каталог, если товаров несколько и корзина не нужна

40 000рублей — интернет-магазин на Tilda; на коде от 85 000 ₽

Если товар нужно крутить пальцем, а не прокруткой, — это 3D-сцена, от 40 000 ₽. Нужен только макет, без сборки, — дизайн лендинга от 10 000 ₽. Сайт на чистом коде — разработка на чистом коде. Все направления и суммы — цены.

Вопросы

Что спрашивают о промо-сайте

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

Лендинг — от 7 рабочих дней, на Tilda обычно 7–12. Видео по скроллу добавляет несколько рабочих дней на веб-часть. Если материала нет, срок съёмки или 3D-модели называю отдельно и до старта.

Не будет ли такая страница тяжёлой на телефоне?

Вес задаётся числом кадров и их размером. В этом примере промо-сайта 90 кадров по 1600×900 весят вместе 2,0 МБ. Первый кадр появляется сразу, остальные догружаются, пока страницу листают. Для телефона — своя раскладка, а замер скорости показываю до сдачи.

Можно ли сделать это на Tilda?

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

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

Лучший вариант — 3D-модель от производителя или чертежи, по которым её собирают. Второй — съёмка на поворотном столе. Если нужен подрядчик, его сумму называю отдельной строкой до начала работ. Сгенерированные кадры, как здесь, годятся для товара, придуманного для примера, но точную форму настоящего изделия не удержат.

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

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

Как промо-сайт с анимацией виден в поиске?

Поисковик не смотрит анимацию — он читает текст: заголовки, описание товара, ответы на вопросы. Поэтому текст стоит рядом с эффектом обычной разметкой, а базовое SEO и Метрика с целями входят в лендинг.

Ещё примеры

Другие примеры видео по скроллу

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

Кроссовок раскладывается по слоям

Для магазина обуви: подошва, пена, стелька и шнурки расходятся при прокрутке.

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

Бургер собирается из ингредиентов

Для ресторана или кафе: ингредиенты по очереди ложатся друг на друга, сыр тает.

Дизайн сайта ресторана

Камера летит к пентхаусу

Для застройщика: пролёт на закате с высоты к башне и на террасу пентхауса.

Лендинг ЖК

Флакон застывает из золотой спирали

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

Сайт бренда парфюмерии

Турбина разбирается по оси

Для производителя техники: вертикальный ролик под телефон, деталь расходится по оси, выноски набирают цифры.

Сайт с анимацией

Как это устроено и сколько стоит

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

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

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

Обсудить свой промо-сайт

Made on

Tilda