11 марта 2017
10118
preloader, загрузка сайта с анимацией, эффект для сайта

Прелоадер для сайта на JQuery

JQuery
Демонстрация » Скачать »

Доброго времени суток уважаемые подписчики, читатели и просто посетители нашего сайта! Начинаю этот материал я с новой ступени для себя отсчета, а точнее с 101 урока, который, надеюсь, Вам пригодится и понравится. Вообще, использование прелоадера для сайта широко известная тема среди разных анимации и эффектов, но я замечал, что многие из них, имеют очень громозкий и не удобный код, поэтому решил написать что то попроще и использовал для этого jQuery.

 

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

 

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

 

 

Первый шаг. HTML.

 

Для начала, я решил сделать картинку, которая имеет разрешение 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">

 

 

Второй шаг. jQuery.

 

Сам скрипт очень простой, не знаю нужны ли будут комментарии, но думаю все-таки напишу, чтобы было меньше вопросов. Ну, во-первых, скрипт работает в окне, который выполняет требования идентификатора load. Во-вторых, данному идентификатору присваивается задежка с помощью функции delay в 2500 мс, чтобы как раз таки и был виден данный эффект, после идет функция fadeOut со значением slow, что позволяет показывать нам сам сайт, после задержки. Все достаточно элементарно и просто, как видите.

 

$(window).on('load', function () {
	$('#load').delay(2500).fadeOut('slow');
});

 

 

Третий шаг. CSS.

 

Переходим к последнему шагу, в котором пропишем все необходимые стили для правильной работы скрипта. Сразу хочу отметить, что все свойства и значения (кроме, пожалуй, 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;
}	

 

Подводим итоги. 

 

Скрипт получился, как Вы могли заметить, достаточно простой, минималистичный и на мой взгляд достаточно удобным. Конечно функционал базовый, так как потребностей может быть много, поэтому оставляйте свои комментарии, чего бы Вы хотели узнать и увидеть. Если какая-то идея будет, то запишу еще один материал по данному поводу. А так, спасибо всем за внимание, простите если редко пишу, но всегда рад Вашим комментариям!)