URL скопирован в буфер обмена!
Как сделать эффект 3D наклона карточки товара при наведении курсора?
С помощью этой модификации можно добавить эффект 3D наклона карточки товара в каталоге тильда при наведении курсора на его угол. Дополнительно можно включить отображение тени. Работает с блоками ST300, ST305N, ST310N, ST315N и ST320N
Модификация работает с включенным Autoscale в блоках
Модификация работает только со стандартными блоками
Номер модификации в библиотеке TiCode
Тип блока
Радиус скргуления углов карточек
Уровень наклона
Тень при наклоне
Цвет тени
Размытие тени
Прозрачность тени
Настройки тени
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD123--><script>
(function() {
const TCDworkmblst = true;
const TCDshadow3D = 'transparent';
function TIhexToRgba3D(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 TiCodeShop3D() {
return TCDworkmblst || window.innerWidth > 640;
}
setTimeout(() => {
const cards = document.querySelectorAll('754__content');
cards.forEach(TCElementShop => {
const TiCodeMouseMove3D = function(event) {
const TCDrect = TCElementShop.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 TCDrgbaShadowColor3D = TCDshadow3D.startsWith('#')
? TIhexToRgba3D(TCDshadow3D, 0.1)
: TCDshadow3D;
TCElementShop.style.transform = `perspective(500px) rotateX(${TirotateX}deg) rotateY(${TirotateY}deg)`;
TCElementShop.style.boxShadow = `${TCshadowX}px ${TCshadowY}px ${TCDshadowBlur}px ${TCDrgbaShadowColor3D}`;
};
TCElementShop.addEventListener('mouseenter', function() {
if (TiCodeShop3D() && !TCElementShop.classList.contains('mousemove-attached')) {
TCElementShop.addEventListener('mousemove', TiCodeMouseMove3D);
TCElementShop.classList.add('mousemove-attached');
TCElementShop.style.transition = 'transform 0.1s ease-out, box-shadow 0.1s ease-out';
TCElementShop.style.borderRadius = '0px';
}
});
TCElementShop.addEventListener('mouseleave', function() {
if (TiCodeShop3D()) {
TCElementShop.removeEventListener('mousemove', TiCodeMouseMove3D);
TCElementShop.classList.remove('mousemove-attached');
TCElementShop.style.transform = 'perspective(500px) rotateX(0deg) rotateY(0deg)';
TCElementShop.style.boxShadow = 'none';
TCElementShop.style.borderRadius = '0px';
}
});
});
}, 2000);
})();
</script>
<script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
1. Создаем блок каталога и в генераторе выбираем "тип блока". Если вы подключили в блок магазина товары из каталога, то выбираем пункт "Каталог тильда" вне зависимости от того какой блок магазина используете. Если вы грузите товары в сам блок, то выбираем тип блока который создали. Модификация поддерживает блоки ST300, ST305N, ST310N, ST315N и ST320N
2. При необходимости указываем дополнительные настройки в генераторе:
Уровень наклона - выбираем градус наклона элемента (стандартный / сильный / слабый);
Тень при наклоне - если включено, то при наклоне будет появляться тень (для этого нужно указать цвет, размытие и прозрачность тени);
Радиус скругления углов- если в настройках блока скругляли углы карточкам, то в генератор дублируем это число. Указывать радиус нужно только в случае если используете тень. Если тень не нужна, то можно оставить 0;
3. Копируем готовый код и вставляем в HTML блок T123. Блок кода размещаем под блоком магазина
2. При необходимости указываем дополнительные настройки в генераторе:
Уровень наклона - выбираем градус наклона элемента (стандартный / сильный / слабый);
Тень при наклоне - если включено, то при наклоне будет появляться тень (для этого нужно указать цвет, размытие и прозрачность тени);
Радиус скругления углов- если в настройках блока скругляли углы карточкам, то в генератор дублируем это число. Указывать радиус нужно только в случае если используете тень. Если тень не нужна, то можно оставить 0;
3. Копируем готовый код и вставляем в HTML блок T123. Блок кода размещаем под блоком магазина
More products
