Как использовать прелоудер

Как использовать прелоадеры

Прелоадеры, размещенные на этом сайте — вектор, сохраненный в формате json.

Я отрисовываю их в иллюстраторе. Анимирую в After Effects, с помощью плагина Bodymovin сохраняю в формате json и закачиваю на сайт https://lottiefiles.com. После получаю код, который ты можешь вставлять в html-объекты на тильде или на сайты, написанные с нуля. В общем везде, куда можно вставить код.

Вот, например вставляю html-объект здесь:

ИНСТРУКЦИЯ

Ты создал свой сайт.

Создаешь отдельную страницу.

На странице создаешь zero блок.

Заходишь в редактирование и удаляешь все ненужные слои.

Выставляешь параметры artboard.

Цвет фона выставляешь такой, какой тебе нужен. Во время открытия страницы будет появляться прелоадер на выбранном тобой фоне, и после секунды - двух он будет уходить в прозрачность, за ним будет появляться основной цвет твоего сайта. Значит надо выбирать такой, который даст красивый переход при наложении одного цвета на другой.

Создаешь новый html-элемент.

Выставляеешь следующие параметры.

Wight и high ты выставляешь такими, каким хочешь видеть свой прелоадер на странице.
Кликаешь по созданному элементу. Открывается панель редактирования кода. Удаляешь то, что там уже есть и вставляешь код, скопированный на моей странице.

Проверяешь, чтобы размеры были такими, каким ты хочешь видеть свой прелоадер.

Сохраняешь данные в панели редактирования кода. Выходишь. Сохраняешь изменения в zero блоке. Выходишь.
Открываешь библиотеку блоков и в поисковой строке вбиваешьТ123. Создаешь html блок.

Кликаешь на контент.

В открывшуюся панель добавляешь код


1.	<style>
2.	#rec166025753 {
3.	  position: fixed;
4.	  left: 0;
5.	  top: 0;
6.	  right:0;
7.	  bottom:0;
8.	  z-index: 100005;
9.	}
10.	</style>
11.	<script>
12.	$("body").css("overflow","hidden");
13.	$(document).ready(function() {
14.	    setTimeout(function() {
15.	        $("#rec166025753").delay(350).fadeOut('slow'); 
16.	        $("body").css("overflow","");
17.	        window.dispatchEvent(new Event('resize'));
18.	    }, 3000);
19.	});
20.	$(window).on('load', function () {
21.	    $("#rec166025753").delay(350).fadeOut('slow');
22.	    setTimeout(function() {  
23.	    $("body").css("overflow",""); 
24.	    window.dispatchEvent(new Event('resize'));    
25.	    }, 400);
26.	});
27.	</script>

Код взят здесь https://mo-ti.ru/preloader Большое спасибо mo-ti!

Заходишь в настройки нашего zero блока, в который ты вставил код анимированного прелоадера.

И копируешь id блока в самом низу открывшегося окна.

Этот id тебе надо вставить в три строки кода от mo-ti, который ты вставил в блок T123. Вторая, пятнадцатая и двадцать первая строки.

Чтобы выставить длительность тебе надо поэкспериментировать с delay.

Прелоадер готов!

Теперь надо поставить его в правильное место.

Есть две возможности его размещения.

Первая:

Если прелоадер нужен на всех страницах. То его можно вставить в страницу header, и он автоматически будет появляться перед всеми страницами сайта. Если на каких-то страницах он не нужен, ты можешь его отключить в настройках этой страницы.

Вторая:

Можно скопировать эти два блока и вставить непосредственно на те страницы, на которых он нужен.

Только после размещения этих блоков на новой странице, надо поменять id блока прелоадера в коде в блоке T123.

И все будет работать ;)