GiftBox-3D

Виджет, который добавляет на страницу сайта интерактивный 3D объект в виде подарочной коробки.

Demo: https://dmitryspace.com/3d-gift

Установка

В то место страницы, где должен быть виджет, нужно добавить такой код:

<script 
  id="GiftBox3D" 
  src="https://dmitryspace.com/3d-gift/GiftBox.init.js"
  data-color1 = "f69974"
  data-color2 = "ea3e55"
  data-text = "Подарок!"
  data-text-color = "ffeeee"
  data-font-size =  "30"
  data-open-trigger = "hover"
></script>

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

<div style="width:400px;">
  <script id="GiftBox3D" src="https://dmitryspace.com/3d-gift/GiftBox.init.js"></script>
</div>

Настройки

Виджет имеет несколько опций, которые прописываются в качестве атрибутов в теге <script>

Опция	Тип	По-умолчанию	Описание
id	строка	GiftBox3D	ID элемента. Всегда равен GiftBox3D (обяз.)
src	ссылка	https://dmitryspace.com/3d-gift/GiftBox.init.js	Ссылка на файл GiftBox.init.js (обяз.) Вы можете использовать ссылку из примера, либо загрузить этот файл в своё файловое хранилище.
data‑color1	HEX код цвета (без решётки)	f69974	Цвет подарочной коробки. (не обяз.)
data‑color2	HEX код цвета (без решётки)	ea3e55	Цвет ленты на подарочной коробке. (не обяз.)
data‑text	строка	Подарок!	Текст, который будет появляться, при наведении курсора мыши на коробку. (не обяз.) Желательно использовать одно-два коротких слова. Если нужно перенести текст на другую строку, то вместо переноса строки используется управляющий символ \n
data‑text‑color	HEX код цвета (без решётки)	ffffff	Цвет текста (не обяз.)
data‑font‑size	число	50	Размер текста (не обяз.)
data‑background	HEX код цвета (без решётки)		Цвет фона (не обяз.)
data‑open‑trigger	строка	"hover"	Триггер открытия коробки ["hover"\|"click"] (не обяз.)

Для выбора цвета вы можете воспользоваться этим инструментом: https://csscolor.ru/

Обработка событий

$(window).on("message onmessage", function(e) {
  let message = e.originalEvent.data;
  if (message.type === 'giftHover') {
    // Обработка наведения
    console.log('Gift hovered');
  }
  
  if (message.type === 'giftClick') {
    // Обработка клика
    console.log('Gift clicked');
  }
});

Поддержка браузерами

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

Браузеры, поддерживающие WebGL