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 на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем создаем в зеро блоке элемент и присваиваем ему класс ti-incline
Чтобы добавить класс блоку, заходим в настройки блока и сверху от id блока будет кнопка "Добавить CSS Class Name"
Если у вас элементов несколько (например наклонять нужно шейп с текстом), то сначала объединяем эти элементы в группу объектов и уже ей присваиваем класс ti-incline
2. При необходимости указываем дополнительные настройки в генераторе:
Уровень наклона - выбираем градус наклона элемента (стандартный / сильный / слабый);
Поддержка мобилок - если включено, то модификация будет работать на мобилках;
Тень при наклоне - если включено, то при наклоне будет появляться тень (для этого нужно указать цвет, размытие и прозрачность тени);
3. Копируем готовый код и вставляем в HTML блок T123.
Чтобы добавить класс блоку, заходим в настройки блока и сверху от id блока будет кнопка "Добавить CSS Class Name"
Если у вас элементов несколько (например наклонять нужно шейп с текстом), то сначала объединяем эти элементы в группу объектов и уже ей присваиваем класс ti-incline
2. При необходимости указываем дополнительные настройки в генераторе:
Уровень наклона - выбираем градус наклона элемента (стандартный / сильный / слабый);
Поддержка мобилок - если включено, то модификация будет работать на мобилках;
Тень при наклоне - если включено, то при наклоне будет появляться тень (для этого нужно указать цвет, размытие и прозрачность тени);
3. Копируем готовый код и вставляем в HTML блок T123.
Brazilian monkey
Chinese monkey
American monkey
