URL скопирован в буфер обмена!
Как сделать липкое меню, которое следует за курсором на Tilda
С помощью этой модификации можно добавить кнопку, которая плавно следует за курсором мыши. На кнопку можно повесить ссылку для открытие меню, формы, корзины, всплывающего окна и т.д. Поддерживается SBS анимация. Мод работает только на экранах шириной от 960 пикселей.
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Класс кнопки
Задержка перед появлением меню
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD127--><script>
document.addEventListener('DOMContentLoaded', () => {
if (window.innerWidth <= 960) return;
const TCDdfelem = document.querySelector('.tc-following-menu');
if (!TCDdfelem) return;
setTimeout(() => {
document.body.appendChild(TCDdfelem);
Object.assign(TCDdfelem.style, {
position: 'absolute',
left: '0px',
top: '0px',
zIndex: '999',
transform: 'translate(-9999px, -9999px)',
opacity: '0',
transition: 'opacity 0.4s ease',
});
const TCDoffset = 50;
const TildaMoveTi = 0.10;
let targetX = 0, targetY = 0;
let currentX = 0, currentY = 0;
let TCDisPaused = false;
let TildaTiPopup = false;
let firstMove = true;
let readyToShow = false;
setTimeout(() => {
readyToShow = true;
}, 500);
const TCDobspoups = new MutationObserver(() => {
const TiCodeselectorHide = [
'.t-popup__bg.t-popup__bg-active',
'.t-popup.t-popup_show',
'.t450__menu_show'
];
TildaTiPopup = TiCodeselectorHide.some(selector => !!document.querySelector(selector));
});
TCDobspoups.observe(document.body, {
childList: true,
subtree: true,
attributes: true,
attributeFilter: ['class']
});
document.addEventListener('mousemove', (event) => {
targetX = event.pageX + TCDoffset;
targetY = event.pageY + TCDoffset;
if (firstMove && readyToShow) {
currentX = targetX;
currentY = targetY;
TCDdfelem.style.transform = `translate(${currentX}px, ${currentY}px)`;
TCDdfelem.style.opacity = '1';
firstMove = false;
}
});
TCDdfelem.addEventListener('mouseenter', () => {
TCDisPaused = true;
});
TCDdfelem.addEventListener('mouseleave', () => {
TCDisPaused = false;
});
function TiCodelimitPosition() {
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const elementWidth = TCDdfelem.offsetWidth;
const elementHeight = TCDdfelem.offsetHeight;
const offsetX = 50;
const offsetY = 50;
const scrollTop = document.documentElement.scrollTop;
const scrollLeft = document.documentElement.scrollLeft;
currentX = Math.min(Math.max(currentX, offsetX + scrollLeft), windowWidth - elementWidth - offsetX + scrollLeft);
currentY = Math.min(Math.max(currentY, offsetY + scrollTop), windowHeight - elementHeight - offsetY + scrollTop);
}
function TiCodecheckOverlap() {
if (TildaTiPopup) {
TCDdfelem.style.visibility = 'hidden';
return;
}
const rect = TCDdfelem.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
const TCDundcurs = document.elementFromPoint(centerX, centerY);
if (TCDundcurs && !TCDdfelem.contains(TCDundcurs)) {
const elementZIndex = window.getComputedStyle(TCDdfelem).zIndex;
const underElementZIndex = window.getComputedStyle(TCDundcurs).zIndex;
if (parseInt(underElementZIndex) > parseInt(elementZIndex)) {
TCDdfelem.style.visibility = 'hidden';
} else {
TCDdfelem.style.visibility = 'visible';
}
} else {
TCDdfelem.style.visibility = 'visible';
}
}
function TiCodeAnimTilda() {
if (!TCDisPaused && !firstMove) {
currentX += (targetX - currentX) * TildaMoveTi;
currentY += (targetY - currentY) * TildaMoveTi;
TiCodelimitPosition();
TCDdfelem.style.transform = `translate(${currentX}px, ${currentY}px)`;
}
TiCodecheckOverlap();
requestAnimationFrame(TiCodeAnimTilda);
}
TiCodeAnimTilda();
}, 500);
});
</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. Создаем в Zero Block изображение и присваиваем ему класс tc-following-menu
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
Настраиваем для изображения размер. Если в настройках указано 50px, то размер меню будет 50px. Сам элемент можно вынести за пределы блока.
2. При необходимости указываем дополнительные настройки в генераторе:
Задержка перед появлением - указываем задержку перед появлением меню на экране. Стандартно это 500(0,5 секунд);
3. Копируем готовый код и вставляем в HTML блок T123. Блок кода размещаем в самом низу сайта
Примечание! Скрипт поддерживает SBS анимацию которую вы накидываете на изображение. Если у вас на сайте есть прелоадер, то ставьте время появления меню 2000-3000, в зависимости от того сколько времени показывает прелоадер.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
Настраиваем для изображения размер. Если в настройках указано 50px, то размер меню будет 50px. Сам элемент можно вынести за пределы блока.
2. При необходимости указываем дополнительные настройки в генераторе:
Задержка перед появлением - указываем задержку перед появлением меню на экране. Стандартно это 500(0,5 секунд);
3. Копируем готовый код и вставляем в HTML блок T123. Блок кода размещаем в самом низу сайта
Примечание! Скрипт поддерживает SBS анимацию которую вы накидываете на изображение. Если у вас на сайте есть прелоадер, то ставьте время появления меню 2000-3000, в зависимости от того сколько времени показывает прелоадер.
