Прелоaдер лого с анимацией на tilda, easy!

ШАГ 1. Бежим в настройки нашего проекта/сайта, кликаем на пункт меню "еще", немного пролистываем и находим вкладку HTML - переходим в нее и вставляем наш код HTML

HTML

<div id="preloader"> 
<img src="your-logo-url" id="preloader-logo" alt="Preloader Logo"> 
<p id="preloader-quote">Your Quote Here</p> 
</div>

Этот код создает прелоадер, который состоит из изображения (логотипа) и текста (цитаты)

Путем замены этих данных на свои собственные, вы можете настроить содержимое прелоадера для отображения вашего логотипа и цитаты.

your-logo-url: URL-адрес вашего логотипа. Замените your-logo-url на URL-адрес изображения вашего логотипа, который вы хотите использовать для прелоадера. Например, https://example.com/logo.png.
Preloader Logo: Альтернативный текст для логотипа прелоадера. Замените Preloader Logo на текст, который вы хотите использовать в качестве альтернативного описания для логотипа. Например, "Логотип сайта".
Your Quote Here: Текст цитаты. Замените Your Quote Here на текст цитаты, который вы хотите отображать на прелоадере. Например, "Загружаемся для вас".

ШАГ 2. Сюда же вставляем код JAVASCRIPT

JAVASCRIPT

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
$(document).ready(function() { var text = "CREATED BY MAN"; var speed = 100; var contentLoaded = false; 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() { if (contentLoaded) { setTimeout(function() { $('#preloader').fadeOut('slow'); }, 3000); } else { setTimeout(function() { $('#preloader').fadeOut('slow'); }, 5000); } }); } startAnimation(); $(window).on('load', function() { contentLoaded = true; }); });
</script>

Этот код анимирует текст в виде печатной машинки на прелоадере и закрывает прелоадер после завершения анимации и загрузки контента.

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

text: Текст, который будет анимироваться в виде печатной машинки. Вы можете изменить значение этой переменной на любой другой текст, который вы хотите использовать для анимации.
speed: Скорость анимации печатной машинки. Задержка между печатаемыми символами. Вы можете изменить это значение на любое другое целое число, чтобы настроить скорость анимации.
contentLoaded: Флаг, указывающий, загружен ли весь контент страницы или нет. Это значение будет устанавливаться в true после полной загрузки контента на странице.
$('#preloader-quote'): Выборка элемента с идентификатором preloader-quote, который содержит текст для анимации печатной машинки. Вы можете изменить селектор на любой другой, чтобы выбрать нужный элемент для анимации.
$('#preloader'): Выборка элемента с идентификатором preloader, который представляет прелоадер. Этот элемент будет скрыт после завершения анимации и загрузки контента.
fadeOut('slow'): Метод jQuery для плавного скрытия элемента. Вы можете изменить аргумент slow на другое значение, такое как fast или числовое значение, чтобы настроить скорость скрытия прелоадера.
setTimeout(): Функция JavaScript для установки таймера. Мы используем ее для установки задержек перед закрытием прелоадера. Вы можете изменить значения аргументов внутри setTimeout, чтобы настроить время задержки.

Сохраняем.

ШАГ 3. Не забываем в HTML поменять your-logo-url на свою ссылку с лого, а вместо Your Quote Here подставить свой текст.

Сохраняем

Шаг 4. Спускаемся ниже и идем во вкладку 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; 
width: 30%; 
text-align: center; 
font-size: 12pt; 
color: #d6d6d6; 
max-width: 300px; 
opacity: .5; 
font-family: 'TildaSans'; 
letter-spacing: 1px; 
}

Этот код стилизует прелоадер.

Путем изменения этих значений, вы можете настроить внешний вид и расположение прелоадера и его содержимого в соответствии с вашими предпочтениями и дизайном сайта.

#preloader: Стили для элемента с идентификатором preloader, который представляет прелоадер. Мы устанавливаем позицию элемента на фиксированную (position: fixed;), чтобы он оставался на месте при прокрутке страницы. Он занимает всю ширину и высоту окна браузера (width: 100%; height: 100%;), находится в самом верху страницы (top: 0; left: 0;), и имеет очень высокий z-index (9999), чтобы быть поверх остального контента. Фоновый цвет установлен на черный (background-color: black;), а элементы внутри него выравниваются по вертикали с помощью display: flex; flex-direction: column; justify-content: center; align-items: center;.
#preloader-logo: Стили для элемента с идентификатором preloader-logo, который содержит логотип прелоадера. Здесь мы устанавливаем ширину на 70 пикселей (width: 70px;), а высоту автоматически подстраивается пропорционально (height: auto;).
#preloader-quote: Стили для элемента с идентификатором preloader-quote, который содержит текст на прелоадере. Устанавливаем отступ сверху на 40 пикселей (margin-top: 40px;), ширину на 30% от родительского элемента (width: 30%;), выравнивание текста по центру (text-align: center;), размер шрифта 12 пунктов (font-size: 12pt;), цвет шрифта серый (color: #d6d6d6;), максимальную ширину 300 пикселей (max-width: 300px;), прозрачность текста на 50% (opacity: .5;), используем шрифт TildaSans, устанавливаем интервал между символами в 1 пиксель (letter-spacing: 1px;).

Сохраняем

Опубликовываем все станицы и хвалим себя за проделанную работу.

Посмотреть проект http://hutkez.ru/

Подписывайтесь, будет интересно!

, Яндекс.Дзен