Кастомизация прелоадера на Тильде: от Zero Block до сложной анимации

Прелоадер — это не просто крутящийся кружок, а мощный инструмент брендинга. Пока страница загружается, он удерживает внимание пользователя и создает правильное первое впечатление. Рассказываем, как сделать уникальный прелоадер на Тильде своими руками.

Что такое прелоадер и зачем он нужен

Прелоадер (preloader) — это анимация, которая отображается на экране, пока страница полностью не загрузится.

Почему это важно:

• Удерживает внимание в первые секунды
• Показывает, что сайт работает, а не завис
• Укрепляет бренд через фирменную анимацию
• Создает эмоциональную связь с посетителем

Особенно актуален для сайтов с тяжелой графикой, видео и Zero-блоками.

Способ 1: Простой прелоадер из Zero Block

Это оптимальный метод по соотношению сложности и возможностей.

Шаг 1. Создаем Zero Block

Добавьте Zero Block в самом верху страницы. В настройках установите высоту 100% — блок закроет весь экран.

Разместите внутри элементы прелоадера:

• Логотип
• Анимированный текст
• SVG-элементы
• Спиннер

Шаг 2. Находим rec ID блока

Нажмите на Zero Block → Настройки блока → скопируйте ID блока (например, rec12345678).

Шаг 3. Подключаем jQuery

Настройки сайта → Ещё → включите Подключить jQuery на страницах сайта.

Шаг 4. Добавляем блок T123 с кодом

После Zero Block добавьте блок T123 и вставьте код, заменив rec12345678 на ваш ID:

html

<style>
#rec12345678 {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 9999999;
}
</style>

<script>
function preventScroll(event) {
event.preventDefault();
}

document.addEventListener('wheel', preventScroll, { passive: false });
document.addEventListener('touchmove', preventScroll, { passive: false });

$(document).ready(function() {
setTimeout(function() {
$('#rec12345678').fadeOut(2000);
document.removeEventListener('wheel', preventScroll);
document.removeEventListener('touchmove', preventScroll);
}, 0);
});
</script>

Как это работает:

• Блок фиксируется на весь экран
• Прокрутка блокируется
• После загрузки страницы прелоадер плавно исчезает за 2 секунды

Шаг 5. Настройка параметров

Изменяйте fadeOut(2000) — цифра в миллисекундах определяет скорость исчезновения. Рекомендуем 1000–2000 мс.

Способ 2: Прелоадер с эффектом печатной машинки

Для креативных проектов — динамичный текст, который печатается на глазах.

HTML (в блок T123):

html

<div id="preloader">
<img src="ваш-логотип.png" id="preloader-logo" alt="Логотип">
<p id="preloader-quote"></p>
</div>

CSS (Настройки сайта → CSS):

css

#preloader {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9999;
background-color: black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

#preloader-logo {
width: 70px;
height: auto;
}

#preloader-quote {
margin-top: 40px;
text-align: center;
font-size: 12pt;
color: #d6d6d6;
font-family: 'TildaSans';
}

JavaScript (добавьте в тот же T123):

javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var text = "ВАШ ТЕКСТ ЗДЕСЬ";
var speed = 100;

function typeWriter(text, i, fnCallback) {
if (i < text.length) {
$('#preloader-quote').html(text.substring(0, i + 1));
setTimeout(function() {
typeWriter(text, i + 1, fnCallback);
}, speed);
} else {
fnCallback();
}
}

function startAnimation() {
typeWriter(text, 0, function() {
setTimeout(function() {
$('#preloader').fadeOut('slow');
}, 3000);
});
}

startAnimation();
});
</script>

Способ 3: Интерактивный прелоадер

Самый современный вариант — пользователь должен выполнить действие (например, перетащить элемент), чтобы открыть сайт.

Особенности:

• Создается в Zero Block с двумя шейпами
• Первому шейпу — класс ti-key (перетаскиваемый)
• Второму шейпу — класс ti-target (цель)
• Требуется специальный скрипт через T123

⚠️ Важно: не работает с включенным Autoscale в блоках.

Готовые решения: генераторы кода

Если не хотите разбираться в коде:

• Nolim (https://nolim.cc) - платформа с модификациями для Тильда и встроенным AI инструментом для создания своей кастомной модификации.
• Ворон (voron-dev.ru) — библиотека модификаций, генератор кода под ваш recid
• TiCode — готовые прелоадеры с настройками
• Templatica — подробные инструкции и примеры

5 важных рекомендаций

1. Не перегружайте прелоадер — сложная анимация замедляет загрузку
2. Оптимальное время показа — 1–2 секунды, не дольше
3. Проверяйте на мобильных — адаптивность критически важна
4. Тестируйте после публикации — убедитесь, что прелоадер появляется и исчезает корректно
5. Избегайте распространенной ошибки — прелоадер не должен скрывать контент при перезагрузке

Заключение

Кастомизация прелоадера на Тильде доступна каждому. Начните с простого Zero Block и базового скрипта, а затем экспериментируйте с анимациями и интерактивом.

Главные принципы:

• Скорость — не заставляйте ждать дольше нужного
• Эстетика — дизайн в едином стиле с сайтом
• Функциональность — прелоадер не должен создавать проблем

Используйте готовые генераторы кода, тестируйте на разных устройствах — и ваш сайт будет встречать посетителей ярко и профессионально.

Более подробно читайте в статье на сайте по ссылке >>>.

Подписывайтесь мой канал, чтобы не пропустить новые инструкции по работе с Tilda! 🔥

Также подписывайтесь в мое сообщество ВК: https://vk.ru/site_uslugi или https://vk.ru/pro_site_blog или пишите, если Вам нужен сайт.