Прелоадеры, размещенные на этом сайте — вектор, сохраненный в формате 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.
