Интерактивный бейдж

Модификация позволяет добавить интерактивный элемент в виде бейджа на ленточке, со своими изображениями

Открыть шаблон

Главная

Коллекция

Инструкция по настройке

Шаблон страницы

Как добавить шаблон

74890716

Для корректной работы модификаций подключите библиотеку jQuery:

Настройки сайта -> Еще -> Подключить jQuery на страницах сайта

jQuery

Подготавливаем макет для бейджа и ленты

Для бейджа:

В фигме делаем фрейм размером 1440px ширина и 940px высота.
Левая половина 720px шириной будет передней стороной бейджа, правая половина 720px будет задней стороной бейджа.
Сохраняем изображение в формате .jpg

Для ленты:

В фигме делаем фрейм размером 1025px ширина и 250px высота.
По центру размещаем ваш логотип, с наклоном влево на 90°
Сохраняем изображение в формате .jpg

1 шаг

Открыть образцы

Загружаем макет в 3D-модель

Для загрузки макета, понадобится программа Blender.
Скачиваем и открываем шаблон в Blender
В правом нижнем меню нажимаем на иконку вкладки Material
В появившемся меню нажимаем на крестик справа от бейдж.jpg
На этом же месте появится кнопка Open, нажимаем на неё и загружаем подготовленный на первом шаге макет для бейджа.
В верхнем меню программы нажимаем File - Export - выбираем формат gLTF 2.0 (.glb)
Сохраняем файл нажатием на кнопку Export glTF 2.0

2 шаг

Скачать шаблон

Загружаем 3D-модель на хостинг или GitHub

Для загрузки на GitHub:

Проходим регистрацию (если у вас еще нет аккаунта)
Нажимаем на «+» в верхнем меню кнопка «Create new…»
В выпадающем списке выбираем первый пункт «New repository»
Пишем название папки в графе «Repository name»
Нажимаем на кнопку «Create repository»
Нажимаем на кнопку «uploading an existing file» и загружаем полученный из Blender'а файл в формате .glb
После загрузки, внизу нажимаем на кнопку «Commit changes», чтобы сохранить загрузку

3 шаг

Формируем ссылку на 3D-модель

Находясь на странице после загрузки изображений, копируем ссылку из поисковой строки - https://github.com/tistols/badge
Её нужно будет изменить на такой вид: https://raw.githubusercontent.com/ tistols/badge/main/
Для этого копируем ссылку на хостинг гитхаба https://raw.githubusercontent.com/
Подставляем название вашего профиля https://raw.githubusercontent.com/tistols/
Подставляем название вашей папки (repository) https://raw.githubusercontent.com/ tistols/badge/
Подставляем концовку https://raw.githubusercontent.com/ tistols/badge/main/

Для проверки можно открыть получившийся адрес в новой вкладке браузера (после перехода должно открыться окно с предложением сохранить файл): https://raw.githubusercontent.com/ tistols/badge/main/badge.glb

4 шаг

Создаем Zero Block и открываем редактор

Добавляем html-элемент и копируем туда код
В строке data-glb-urls меняем адрес ссылки на 3D модель
Добавляем изображение и загружаем туда картинку для ленты, копируем на неё ссылку
В строке data-png-urls вставляем скопированную ссылку
Задаем необходимые параметры позиции модели и расположения камеры

5 шаг

Скопировать код

6 шаг

Добавляем блок T123 и копируем в него код

Скопировать код

<!--  TS23 - Модификация для Тильды. Интерактивный бейдж https://mod.tistols.com/interactive-badge
      Образец для 1 бейджа
      data-position - начальное положение камеры [x, y, z]
      data-bands-position - позиции расположения модели
      data-fov - отдаленность камеры от объекта
      data-gravity - вектор силы тяжести [x, y, z]
      data-glb-urls - ссылки на модели
      data-png-urls - ссылки на иконки для ленты
      data-screens - адаптации для разных разрешений  -->
<div class="badgeint" 
      data-position="{[0, 0, 30]}" 
      data-bands-position='[[0,4,0]]' 
      data-fov="10"       
      data-gravity="{[0, -40, 0]}"
      data-glb-urls='["https://raw.githubusercontent.com/tistols/badge/main/badge.glb"]'
      data-png-urls='["https://static.tildacdn.com/tild3332-6561-4631-b932-666332653162/photo.jpg"]'
      data-screens="[
      {min-width: 0, 
      gravity: [0, -40, 0]
      },
      {min-width: 640, 
      gravity: [0, -40, 0]
      },
      {min-width: 980, 
      gravity: [0, -40, 0]
      },
      {min-width: 1280, 
      gravity: [0, -40, 0]
      }
      ]"
></div>
    
<style>
    .badgeint{
        width: 100%;
        height: 100%;
        max-width: 100vw;
        max-height: 100vh;
    }
    .badgeint-wrapper{
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        height: 100%;
    }
    .badgeint-wrapper div,
    .badgeint-wrapper canvas
    {
        width: 100%important;
        max-width: 100%;
        max-height: 100%;
    }
</style>

<!--TS23 - Модификация для Тильды. Интерактивный бейдж https://mod.tistols.com/interactive-badge-->
<script type="module" crossorigin src="https://mods.tistols.com/mods/interactive-badge/interactive-badge-sdfj23iuh.js"></script>

Вам также может быть интересно: