URL скопирован в буфер обмена!
Как сделать интерактивный прелоадер в Zero Block на Tilda?
С помощью этой модификации можно создать интерактивный прелоадер в Zero Block. При загрузке страницы отображаются два элемента, которые необходимо соединить, перетаскивая их с помощью курсора. После соединения элементов можно показать дополнительное изображение и скрыть прелоадер.
Модификация не работает с включенным Autoscale в блоках
Модификация работает только c Zero Block
Номер модификации в библиотеке TiCode
ID блока
Класс элемента (ключ)
Класс элемента (цель)
Тип движения
Показ прелоадера
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD117--><style>
.ti-key {
cursor: grab;
user-select: none;
transition: cursor 0.2s ease;
}
.ti-key:active {
cursor: grabbing;
user-select: none;
}
.ti-target2 {
opacity: 0;
user-select: none;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const TCDintpreloader1 = document.querySelector('#rec1027675206');
const TCDkeypr = TCDintpreloader1.querySelector('.ti-key');
const TCDfinish = TCDintpreloader1.querySelector('.ti-target');
const TCDfinishimg = TCDintpreloader1.querySelector('.ti-target2');
const TCDmovemode = 'horizontal';
const TCDshowmode = 'always';
const TCDtimesession = 30;
function TicodeShowPreloader() {
if (TCDshowmode === 'always') return true;
const lastShown = localStorage.getItem('preloader_last_shown');
if (!lastShown) return true;
const now = Date.now();
const last = parseInt(lastShown, 10);
const diffMinutes = (now - last) / 1000 / 60;
return diffMinutes > TCDtimesession;
}
function TiCodesetPreloaderShownNow() {
localStorage.setItem('preloader_last_shown', Date.now().toString());
}
if (!TicodeShowPreloader()) {
TCDintpreloader1.style.display = 'none';
return;
}
let isDragging = false;
let offsetX = 0;
let offsetY = 0;
let initialLeft = 0;
let initialTop = 0;
let lockedAfterCollision = false;
const TCDrunRect = TCDkeypr.getBoundingClientRect();
const preloaderRect = TCDintpreloader1.getBoundingClientRect();
initialLeft = TCDrunRect.left - preloaderRect.left;
initialTop = TCDrunRect.top - preloaderRect.top;
TCDkeypr.style.position = 'absolute';
TCDkeypr.style.left = initialLeft + 'px';
TCDkeypr.style.top = initialTop + 'px';
function TCDstartDrag(x, y) {
isDragging = true;
offsetX = x - TCDkeypr.getBoundingClientRect().left;
offsetY = y - TCDkeypr.getBoundingClientRect().top;
}
function TCDstopDrag() {
isDragging = false;
}
function TicodedragMove(x, y) {
if (!isDragging || lockedAfterCollision) return;
const parentRect = TCDintpreloader1.getBoundingClientRect();
const testRect = TCDfinish.getBoundingClientRect();
const runWidth = TCDkeypr.offsetWidth;
const runHeight = TCDkeypr.offsetHeight;
let newLeft = x - offsetX - parentRect.left;
let newTop = y - offsetY - parentRect.top;
if (TCDmovemode === 'horizontal') {
newLeft = Math.max(initialLeft, newLeft);
newTop = initialTop;
} else if (TCDmovemode === 'vertical') {
newLeft = initialLeft;
newTop = Math.max(initialTop, newTop);
} else if (TCDmovemode === 'free') {
newLeft = Math.max(0, newLeft);
newTop = Math.max(0, newTop);
}
TCDkeypr.style.left = newLeft + 'px';
TCDkeypr.style.top = newTop + 'px';
const TCDrunRectNow = TCDkeypr.getBoundingClientRect();
const TCDwillCollide = !(
TCDrunRectNow.bottom < testRect.top ||
TCDrunRectNow.top > testRect.bottom ||
TCDrunRectNow.right < testRect.left ||
TCDrunRectNow.left > testRect.right
);
if (TCDwillCollide) {
lockedAfterCollision = true;
if (TCDfinishimg) {
TCDfinish.style.display = 'none';
TCDfinishimg.style.opacity = '1';
setTimeout(() => {
TiCodehidePreloader();
}, 2000);
} else {
TiCodehidePreloader();
}
}
}
TCDkeypr.addEventListener('mousedown', e => TCDstartDrag(e.clientX, e.clientY));
document.addEventListener('mousemove', e => TicodedragMove(e.clientX, e.clientY));
document.addEventListener('mouseup', TCDstopDrag);
TCDkeypr.addEventListener('touchstart', e => {
if (e.touches.length === 1) {
TCDstartDrag(e.touches[0].clientX, e.touches[0].clientY);
}
});
document.addEventListener('touchmove', e => {
if (e.touches.length === 1) {
TicodedragMove(e.touches[0].clientX, e.touches[0].clientY);
}
}, { passive: false });
document.addEventListener('touchend', TCDstopDrag);
function TiCodehidePreloader() {
TCDintpreloader1.style.transition = 'opacity 0.5s ease';
TCDintpreloader1.style.opacity = '0';
setTimeout(() => {
TCDintpreloader1.style.display = 'none';
}, 500);
TiCodesetPreloaderShownNow();
}
document.body.style.overflow = 'hidden';
TCDintpreloader1.style.position = 'fixed';
TCDintpreloader1.style.top = 0;
TCDintpreloader1.style.left = 0;
TCDintpreloader1.style.width = '100%';
TCDintpreloader1.style.height = '100%';
TCDintpreloader1.style.zIndex = 9999999;
});
</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 и в настройках устанавливаем высоту блока 100%.
2. Создаем в зеро блоке два шейпа в которые загружаем свои изображения и присваиваем классы:
ti-key - для шейпа который будем перетаскивать;
ti-target - для шейпа который будет служить целью;
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
Дополнительно можно создать третий шейп с классом ti-target2, который изначально будет скрыт. Если пользователь соединит ti-key с ti-target, то покажет ti-target2 и через 2 секунды скроет прелоадер; Если шейпа ti-target2 нет, то прелоадер будет скрывать сразу как только соприкоснутся ti-key с ti-target
3. Копируем id зеро блока и вставляем в генератор в поле "ID блока";
4. Настраиваем дополнительные опции в генераторе:
Тип движения - выбираем направление в котором можно будет передвигать ключ (по горизонтали/вертикале или свободное перемещение без привязки к осям);
Показ прелоадера - указываем как часто будем показывать прелоадер (каждый раз - показывается при каждом обновлении страницы, Раз при сессии - показываем прелоадер раз в 30 минут);
5. Копируем код и вставляем HTML блок T123. Блок Т123 размещаем под зеро блоком с шейпами
2. Создаем в зеро блоке два шейпа в которые загружаем свои изображения и присваиваем классы:
ti-key - для шейпа который будем перетаскивать;
ti-target - для шейпа который будет служить целью;
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
Дополнительно можно создать третий шейп с классом ti-target2, который изначально будет скрыт. Если пользователь соединит ti-key с ti-target, то покажет ti-target2 и через 2 секунды скроет прелоадер; Если шейпа ti-target2 нет, то прелоадер будет скрывать сразу как только соприкоснутся ti-key с ti-target
3. Копируем id зеро блока и вставляем в генератор в поле "ID блока";
4. Настраиваем дополнительные опции в генераторе:
Тип движения - выбираем направление в котором можно будет передвигать ключ (по горизонтали/вертикале или свободное перемещение без привязки к осям);
Показ прелоадера - указываем как часто будем показывать прелоадер (каждый раз - показывается при каждом обновлении страницы, Раз при сессии - показываем прелоадер раз в 30 минут);
5. Копируем код и вставляем HTML блок T123. Блок Т123 размещаем под зеро блоком с шейпами
Обновите страницу чтобы увидеть Preloader
Loading...
