URL скопирован в буфер обмена!

Как сделать эффект 3D наклона элемента при наведении курсора?

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

Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode

Генератор кода

Класс элемента
Уровень наклона
Поддержка мобилок
Тень при наклоне
Цвет тени
Размытие тени
Прозрачность тени
Настройки тени
Войдите в аккаунт чтобы получить доступ к генератору кода
Этот генератор кода доступен только тем кто оплатил подписку
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev --> <!--TCD089--><script> const TCDworkmbl = true; const TCDshadowColor = 'transparent'; function TIhexToRgba(hex, alpha = 1) { let r = 0, g = 0, b = 0; if (hex.length === 4) { r = parseInt(hex[1] + hex[1], 16); g = parseInt(hex[2] + hex[2], 16); b = parseInt(hex[3] + hex[3], 16); } else if (hex.length === 7) { r = parseInt(hex[1] + hex[2], 16); g = parseInt(hex[3] + hex[4], 16); b = parseInt(hex[5] + hex[6], 16); } return `rgba(${r}, ${g}, ${b}, ${alpha})`; } function TiCodeStartScript() { return TCDworkmbl || window.innerWidth > 640; } document.querySelectorAll('.ti-incline').forEach(TCElement => { const TiCodeMouseMove = function(event) { const TCDrect = TCElement.getBoundingClientRect(); const TCDCenterX = TCDrect.left + TCDrect.width / 2; const TCDCenterY = TCDrect.top + TCDrect.height / 2; const TCmouseX = event.clientX; const TCmouseY = event.clientY; const TirotateX = (TCmouseY - TCDCenterY) / (TCDrect.height / 2) * -10; const TirotateY = (TCmouseX - TCDCenterX) / (TCDrect.width / 2) * 10; const TCshadowX = TirotateY * -1; const TCshadowY = TirotateX * 1; const TCDshadowBlur = 20; const TCDrgbaShadowColor = TCDshadowColor.startsWith('#') ? TIhexToRgba(TCDshadowColor, 0.1) : TCDshadowColor; TCElement.style.transform = `perspective(500px) rotateX(${TirotateX}deg) rotateY(${TirotateY}deg)`; TCElement.style.boxShadow = `${TCshadowX}px ${TCshadowY}px ${TCDshadowBlur}px ${TCDrgbaShadowColor}`; }; TCElement.addEventListener('mouseenter', function() { if (TiCodeStartScript() && !TCElement.classList.contains('mousemove-attached')) { TCElement.addEventListener('mousemove', TiCodeMouseMove); TCElement.classList.add('mousemove-attached'); TCElement.style.transition = 'transform 0.1s ease-out, box-shadow 0.1s ease-out'; } }); TCElement.addEventListener('mouseleave', function() { if (TiCodeStartScript()) { TCElement.removeEventListener('mousemove', TiCodeMouseMove); TCElement.classList.remove('mousemove-attached'); TCElement.style.transform = 'perspective(500px) rotateX(0deg) rotateY(0deg)'; TCElement.style.boxShadow = 'none'; } }); }); </script>
КОПИРОВАТЬ КОД
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем создаем в зеро блоке элемент и присваиваем ему класс ti-incline
Чтобы добавить класс блоку, заходим в настройки блока и сверху от id блока будет кнопка "Добавить CSS Class Name"

Если у вас элементов несколько (например наклонять нужно шейп с текстом), то сначала объединяем эти элементы в группу объектов и уже ей присваиваем класс ti-incline

2. При необходимости указываем дополнительные настройки в генераторе:
Уровень наклона - выбираем градус наклона элемента (стандартный / сильный / слабый);
Поддержка мобилок - если включено, то модификация будет работать на мобилках;
Тень при наклоне - если включено, то при наклоне будет появляться тень (для этого нужно указать цвет, размытие и прозрачность тени);

3. Копируем готовый код и вставляем в HTML блок T123.
Brazilian monkey
Chinese monkey
American monkey
Made on
Tilda