Приветствую, сегодня покажу вам, как сделать прелоадер для вашего сайта. Preloader служит для того, что бы улучшить у пользователя впечатление о сайте. Ведь страница не загружается мгновенно. Картинки грузятся долго, во время их прогрузки сайт будет «прыгать». Так же нужно время для загрузки шрифтов, во время чего сайт так же будет постоянно видоизменятся. Поэтому намного лучше на время загрузки сайт скрыть, и показать пользователя приятную анимацию. После загрузки, просто скрываем его, и пользователь видит сразу красивый, плавный сайт. Этот момент очень сильно улучшает восприятие.
Я покажу 2 способа, как на чистом JavaScript, так и на jQuery. Так же в него можно поместить что угодно: гифку, анимацию, да хоть статичную картинку, все зависит от вас. Так же я оставлю ссылку на поиск в codepen. Там вы сможете найти красивые анимации для прелоадера на CSS. Еще могу порекомендовать сервис loading.io, где вы можете подобрать прелоадер, и скачать его в gif или svg формате. Естественно, большинство прелоадеров платные, но и среди бесплатных можно подобрать приличные. Кстати, преоадер который я сегодня использую в качестве примера был так же взят с данного сайта. Выглядит он вот так:
Базовая структура
Для начала, создадим базовую HTML структуру. Рекомендую помещать preloader сразу после открывающего тега <body>. Так как я буду использовать gif-изображение, то и HTML структура максимально простая: (если вы хотите использовать CSS Preloader, просто поместите его код вместо тега <img>)
<div id='preloader'>
<img src="images/preloader.gif" alt="preloader">
</div>Далее пишем CSS код, для того, что бы скрыть всю страницу, и отцентровать его.
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
}Скрываем прелоадер после загрузки (чистый JavaScript)
window.onload = function() {
let preloader = document.getElementById('preloader');
preloader.classList.add('hide-preloader');
setInterval(function() {
preloader.classList.add('preloader-hidden');
}, 990);
}Так же необходимо добавить несколько строк CSS кода для плавности (ниже распишу для чего конкретно)
#preloader.hide-preloader {
animation: hidePreloader 1s;
}
#preloader.preloader-hidden {
display: none;
}
@keyframes hidePreloader {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}Как это работает?
При помощи window.onload, мы проверяем, загружена ли страница. После загрузки — исполняем написанный ниже код. Создаем переменную, в которую помещаем div с id=’preloader’. После чего, добавляем к этому элементу класс ‘hide-preloader’. Как видно из CSS кода, при добавлении класс запускает анимацию, в которой уменьшает непрозрачность элемента с 1 до 0 за 1 секунду. После анимации прелоадер уже не будет виден, и на этом можно было и закончить, но возникает проблема. Элемент никуда не исчез, а так и покрывает всю страницу, находясь НАД всеми элементами. Это значит, что все элементы ПОД ним не интерактивны (тоесть все ссылки/формы/кнопки работать не будут). Для этого, после загрузки страницы мы запускаем таймер на 990 секунду (немного короче анимации). После окончания таймера, мы добавляем класс ‘preloader-hidden’ к элементу, окончательно скрывая его со страницы. Вы можете подумать, что можно было просто скрыть элемент, с помощью display: none. Это так, но тогда элемент пропадает очень резко, так как display: none — нельзя анимировать.
И вот результат:
Скрываем прелоадер с помощью jQuery
В этом случае нам не нужно добавлять CSS классы и т.д. Только подключить jQuery и написать этот код:
$(document).ready(function() {
$('#preloader').fadeOut(400);
});Спасибо, что прочитали. Если у вас остались любые вопросы, задавайте их в комментариях, всем помогу. Так же буду благодарен, если вы прочитаете другие мои статьи:
1. Анимация при скролле в несколько строк кода
2. Как создать всплывающее окно (попап)?
