В этом уроке я расскажу, как создать свой прелоадер на платформе Tilda с использованием зеро блока и модификаторов.
Описание
Видеоинструкция по подключению
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
Пошаговая инструкция с подключением кода
Анимация для счетчика текста
Модификацию анимации чисел я взял с сайта Тильдошной - Модификация
Шаг 1
Скрипт, для работы прелоудера (Заменить id (rec398753625) блока на id своего зеро блока)
Шаг 2
<!--Скрипт, для работы прелоудера-->
<script>
$("body").css("overflow","hidden");
$(document).ready(function() {
setTimeout(function() {
$("#rec398753625").delay(2500).fadeOut('slow');
$("body").css("overflow","");
window.dispatchEvent(new Event('resize'));
}, 3000);
});
$(window).on('load', function () {
$("#rec398753625").delay(2500).fadeOut('slow');
setTimeout(function() {
$("body").css("overflow","hidden");
window.dispatchEvent(new Event('resize'));
}, 400);
});
</script>Скрываем 3 черные полосы, после загрузки страницы (Добавляем класс .bg-1 на 3 шторы)
Шаг 3
<!--Отключаем 3 полосы (шторы) после загрузки страницы-->
<script>
setTimeout(function() {
$('.bg-1').addClass('none');
}, 5000);
</script>
<style>
.none {
display:none;
}
#rec398753625,
.bg-1 {
position: fixed;
left: 0;
top: 0;
right:0;
bottom:0;
z-index: 100005;
}
</style>Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
