Данная инструкция поможет реализовать таймер обратного отсчета на 5 минут в Tilda с запуском при появлении блока в зоне видимости пользователя, а также настроить автоматическое отключение кнопки после завершения времени.
Таймер обратного отсчета в Tilda с запуском при появлении на экране
Egor Kuncev
В этой статье подробно разобрана настройка таймера обратного отсчета на 5 минут в Tilda с кастомной логикой запуска. Рассматривается, как реализовать ленивый старт таймера при появлении блока в зоне видимости пользователя с помощью IntersectionObserver, а также как синхронизировать работу таймера с элементами Zero Block. Пошагово показано, как обновлять текст внутри блока, управлять состоянием кнопки и отключать её после завершения отсчета, включая удаление ссылки для предотвращения открытия popup. Отдельное внимание уделено корректной интеграции через блок T123, настройке классов и адаптации поведения под разные устройства. Материал будет полезен веб-дизайнерам и разработчикам, работающим с Tilda и кастомным JavaScript.
Инструкция:
Инструкция по настройке таймера (5 минут с автозапуском при появлении блока на экране)
1. Задайте класс блоку таймера
Откройте настройки текстового элемента с временем и в поле
“Дополнительный CSS класс” укажите: timer-five-minut
Внутри этого элемента должен быть текст (например: 05:00), он будет автоматически обновляться.
2. Задайте класс обертке (триггер появления)
Добавьте класс к блоку или контейнеру, при появлении которого должен запускаться таймер:
uc-timer-five-minut
Важно: именно этот элемент отслеживается при скролле.
3. Задайте класс кнопке
Откройте настройки кнопки и в поле
“Дополнительный CSS класс” укажите:
btw-timet
После окончания таймера эта кнопка станет неактивной.
4. Добавьте код в блок T123
Создайте блок T123 (HTML) сразу после таймера и вставьте в него следующий код:
1. Задайте класс блоку таймера
Откройте настройки текстового элемента с временем и в поле
“Дополнительный CSS класс” укажите: timer-five-minut
Внутри этого элемента должен быть текст (например: 05:00), он будет автоматически обновляться.
2. Задайте класс обертке (триггер появления)
Добавьте класс к блоку или контейнеру, при появлении которого должен запускаться таймер:
uc-timer-five-minut
Важно: именно этот элемент отслеживается при скролле.
3. Задайте класс кнопке
Откройте настройки кнопки и в поле
“Дополнительный CSS класс” укажите:
btw-timet
После окончания таймера эта кнопка станет неактивной.
4. Добавьте код в блок T123
Создайте блок T123 (HTML) сразу после таймера и вставьте в него следующий код:
<script>
$(document).ready(function () {
const $timer = $('.timer-five-minut .tn-atom');
const $button = $('.btw-timet a');
const $trigger = $('.uc-timer-five-minut');
let duration = 5 * 60; // 5 минут
let interval = null;
let started = false;
// формат времени MM:SS
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const secs = seconds % 60;
return String(minutes).padStart(2, '0') + ':' + String(secs).padStart(2, '0');
}
// обновление таймера
function updateTimer() {
$timer.text(formatTime(duration));
if (duration <= 0) {
clearInterval(interval);
// делаем кнопку неактивной
$button.css({
'pointer-events': 'none',
'opacity': '0.5',
'cursor': 'default'
});
// убираем ссылку
$button.removeAttr('href');
$button.removeAttr('aria-haspopup');
return;
}
duration--;
}
// запуск таймера один раз
function startTimer() {
if (started) return;
started = true;
updateTimer(); // сразу показать текущее значение
interval = setInterval(updateTimer, 1000);
}
// если браузер поддерживает IntersectionObserver
if ('IntersectionObserver' in window && $trigger.length) {
const observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
startTimer();
observer.disconnect(); // больше не следим
}
});
}, {
threshold: 0.5 // запуск, когда видно 50% блока
});
observer.observe($trigger[0]);
} else {
// fallback: если IntersectionObserver не поддерживается, запускаем сразу
startTimer();
}
});
</script>Пример использования кода
Подписывайтесь на канал
