Доброго времени суток уважаемые подписчики, читатели и просто посетители нашего сайта! Начинаю этот материал я с новой ступени для себя отсчета, а точнее с 101 урока, который, надеюсь, Вам пригодится и понравится. Вообще, использование прелоадера для сайта широко известная тема среди разных анимации и эффектов, но я замечал, что многие из них, имеют очень громозкий и не удобный код, поэтому решил написать что то попроще и использовал для этого jQuery.
Рассматривая данный материал, хочу заметить, что исполнение данного кода работает каждый раз при обновлении страницы и если Вам потребуется это сделать при нажатии или загрузке страницы, можете написать в комментариях сайте, тогда сможем разобрать более детально данный материал.
И так, прежде чем приступить к изучению кода, я подготовил специально для Вас видеоматериал, с подробным ознакомлением данного урока, который Вы можете также посмотреть, если не хотите читать текст или вдруг у Вас возникли какие-либо вопросы.
Для начала, я решил сделать картинку, которая имеет разрешение GIF формата, что позволяет нам более эффективно использовать прелоадер для сайта. Данную картинку я загрузил в папку img, где и будет также лежать обычная картинка PNG, которая будет использоваться после загрузки страницы.
Теперь, нам стоит подключить необходимые стили и скрипты, чтобы данный код успешно отрабатывал. Подключаем библиотеку jquery.min.js, а также сам скрипт load.js, который и будет выполнять функцию прелоадера. Также не забываем про стили, которые у нас находятся в файле demo.css.
<link rel="stylesheet" href="css/demo.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/load.js"></script>
Далее создаем div блок с идентификатором load, который и будет взаимодействовать со скриптом и выполнять данный эффект. После создаем блочный контейнер, в нем размещаем картинку, нашей GIF анимации и чуть ниже выводим какой-то произвольный текст.
<div id="load"> <div> <img src="img/logo.gif" alt="" width="103" height="131"> <p>ЗАГРУЗКА САЙТА</p> </div> </div>
Завершаем HTML код простым выводом картинки PNG.
<img src="img/logo.png">
Сам скрипт очень простой, не знаю нужны ли будут комментарии, но думаю все-таки напишу, чтобы было меньше вопросов. Ну, во-первых, скрипт работает в окне, который выполняет требования идентификатора load. Во-вторых, данному идентификатору присваивается задежка с помощью функции delay в 2500 мс, чтобы как раз таки и был виден данный эффект, после идет функция fadeOut со значением slow, что позволяет показывать нам сам сайт, после задержки. Все достаточно элементарно и просто, как видите.
$(window).on('load', function () {
$('#load').delay(2500).fadeOut('slow');
});
Переходим к последнему шагу, в котором пропишем все необходимые стили для правильной работы скрипта. Сразу хочу отметить, что все свойства и значения (кроме, пожалуй, background, text-align) идентификатора load и load div обязательны, иначе правильно у Вас ничего работать не будет.
#load{
position: fixed;
left: 0;
top: 0;
right:0;
bottom:0;
background: #222629;
}
#load div{
position: absolute;
left: 45%;
top: 35%;
text-align:center;
}
#load div p{
margin-top:20px;
color:#FFFFFF;
}
Скрипт получился, как Вы могли заметить, достаточно простой, минималистичный и на мой взгляд достаточно удобным. Конечно функционал базовый, так как потребностей может быть много, поэтому оставляйте свои комментарии, чего бы Вы хотели узнать и увидеть. Если какая-то идея будет, то запишу еще один материал по данному поводу. А так, спасибо всем за внимание, простите если редко пишу, но всегда рад Вашим комментариям!)