Программный код для создания 3D-эффекта поворота и масштабирования товаров и 3D-панорам в ZERO-блоках и в карточках товаров из каталога в Tilda.
Сервис разбивки видео на слайды:
https://dan-it.ru/video-encoder
ОБЗОР И ИНСТРУКЦИЯ:
 |
1 покупка навсегда! Покупаете 1 раз и можете использовать в любом количестве проектов без ограничений во времени. |
 |
Гарантия помощи При покупке кодов Вы получаете право на бесплатную техподдержку. |
Задать вопрос перед оплатой
Далее можно не читать (написано для SEO-продвижения сайта)
Я подготовил для вас очередную крутую разработку — программные коды, которые добавляют на сайт в Тильде полноценный 3D-обзор товара или панораму, и при этом вам не нужны 3D-модели. Всё делается из простого видео, снятого на обычный телефон. Эта штука отлично зуммируется и вращается на любых устройствах.
Я сделал два варианта реализации: первый — для ZERO блоков, второй — специально для карточек товаров из каталога. Сначала разберём ZERO блок, затем перейдём к каталогу.
Всё начинается со съёмки видео. Фиксируем телефон, включаем запись и за 10 секунд равномерно прокручиваем объект (или сами делаем оборот вокруг себя, если нужна панорама).
Далее используем сервис для разбивки видео на кадры. Я специально сделал для вас удобный инструмент:
https://dan-it.ru/video-encoder
Он позволяет:
Залить видео и скорректировать ориентацию.
Выбрать начальный и конечный кадры.
Обрезать полезную область, если объект занимает не всё пространство.
Настроить количество слайдов и их размер.
Всё это работает и на телефоне. Вы можете бесплатно скачать первый слайд, чтобы оценить качество, а когда подберёте настройки — сгенерировать архив под аккаунтом.
Как настроить в ZERO блоке:
Создаём галерею, назначаем CSS-класс modelgalleryverdan1, отключаем LazyLoad и загружаем все слайды. Галерея будет скрыта на опубликованной странице.
Добавляем шейп с классом slidedivverdan1 — именно в нём будет отображаться 3D-слон. Вёрстку этого шейпа делаем под все экраны.
По желанию добавляем кнопки масштаба с классами danscalemaxverdan1 и danscaleminverdan1.
Вставляем код из файла «Псевдо-3D для ZERO-блока» в блок T123-HTML.
Если нужно несколько 3D-объектов на странице — просто дублируем галерею, шейп и кнопки, меняя цифры в классах (1, 2, 3...).
Теперь — как сделать 3D в карточке товара из каталога.
Это работает только с карточками, которые открываются из блоков каталога типа ST300, ST305N, ST310N и т.п. Не подходит для ST200, ST205 и подобных.
Чтобы код работал, размещаем его в подвале товаров. Создаём отдельную страницу подвала, добавляем блок T123-HTML и вставляем код из файла «Псевдо-3D для Каталога Тильды».
3D-обзор будет автоматически формироваться для товаров, у которых загружено более 40 фотографий. Остальные товары отображаются как обычно.
В настройках каталога выбираем новую страницу подвала и обязательно включаем галочку «Открывать страницу вместо попапа».
Дополнительный бонус — формирование GIF-изображения, чтобы в каталоге товар сразу выглядел как 3D.
Вы можете контролировать размер GIF (до 3 МБ) бесплатно, а когда подберёте настройки — скачать за символическую плату.
Загружаем GIF в карточку:
Если первым — он будет отображаться на странице каталога.
Если вторым, а в настройках включена галочка «Показывать второе изображение при наведении» — 3D-эффект появится при наведении мыши.
На странице каталога используем блоки ST300, ST305N, ST310N... Публикуем весь сайт и наслаждаемся результатом.
Забирайте коды и оживляйте свои товары! До новых встреч!
Ключевые слова:
3D тильда
3D tilda
панорама тильда
панорама tilda
3D обзор товара
3D без модели
псевдо-3D тильда
3D в zero блоке
3D в каталоге тильда
3D в карточке товара
видео в 3D тильда
разбивка видео на кадры
3D слайдер тильда
обзор товара 360
360 градусов тильда
3D tilda
панорама tilda
zero блок 3D
