Подключение прелоадера с помощью jquery
Доброго времени суток. В этой статье будем подключать прелоадер на сайт с помощью библиотеки jquery который сделали в этой статье "Прелоадер на html и css для своего сайта". Начнем.
Просмотреть реализацию в YouTube
1. Подготавливаем рабочую область
Перед тем как мы начнем подключение прелоадера, нам нужно создать небольшой демонстрационный сайт. Для этого, вам нужно вставить данный html код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style/preloader.css">
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div class="preloader">
<div class="preloader__wrapp loader">
<div class="preloader__one one bd_color"></div>
<div class="preloader__one two bd_color"></div>
<div class="preloader__one three bd_color"></div>
<div class="preloader__one four bd_color"></div>
<div class="preloader__two five bd_color"></div>
<div class="preloader__two sixt bd_color"></div>
<div class="preloader__two seven bd_color"></div>
<div class="preloader__two eight bd_color"></div>
</div>
</div>
<div class="wrapp">
<div class="content">
<h1>Подключение прелоадера с помошю jquery</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci saepe numquam provident a quam facilis, quibusdam, odit quisquam libero, quidem aperiam. Eligendi ipsum voluptates adipisci dolor esse voluptas repudiandae minus, repellat velit harum tempora optio quisquam odio, illo molestias praesentium quo! Maxime quidem sunt molestiae dolores quaerat, maiores saepe cumque asperiores odit, voluptatibus sit dignissimos velit quae aliquam ipsa dolorum veniam. Architecto inventore corrupti, unde nesciunt sequi dolore nobis necessitatibus ipsam in accusantium rerum quisquam perspiciatis optio distinctio delectus ab nostrum nemo illum, quidem accusamus? Nam, a mollitia illo alias quas labore totam sunt. Explicabo, natus tempora. Facilis, nihil sed.</p>
</div>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
В файл style.css добавляем код нашего прелоадера, после него добавляем стили нашего импровизированного сайта:
/* page-settings */
.wrapp{
width: 100%;
height: auto;
}
.content{
width: 1140px;
height: auto;
margin: 0 auto;
}
Здесь мы задаем стили обертке .wrapp и контенту .content. В итоге должно получится так что в самом вверху будет наш прелоадер, а под ним будет находится текст.
Теперь нужно спрятать текст под прелоадером. Что бы это сделать нам нужно добавить прелоадеру(.preloader) такие стили:
position: fixed;
top: 0;
left: 0;
z-index: 2;
После таких манипуляций, текст будет спрятан, а на экране будет видно только прелоадер.
2. Подключаем прелоадер
Много людей которые сделали себе прелоадер задумываются о том как его подключить на свой сайт. Но на самом деле это делается очень легко. Что бы это сделать, напишем простенький скрипт, который будет выглядеть так:
$(function(){
'use strict';
$(document).ready(function(){
setTimeout(function(){
$('.preloader').slideUp();
}, 500);
});
});
Метод setTimeout(); в данном примере нужен для того что бы прелоадер пропадал не сразу, а через определенный интервал времени, в нашем случае он пропадет через 500 милисекунд.
Метод slideUp(); добавляет анимированное исчезновение прелоадера, он будет исчезать снизу вверх.
Вместо вышеописанного метода можно использовать другой, он называется fadeOut();. Благодаря этому методу, прелоадер будет плавно становиться прозрачным:
$(function(){
'use strict';
$(document).ready(function(){
$('.preloader').fadeOut();
});
});
Просмотреть реализацию в YouTube
На этом пожалуй все. Если эта статья была вам полезна, то подписывайтесь на новости блога что бы не пропускать новые, еще более интересные статьи!
Также подписывайтесь на мой instagram и telegram, там вы сможете найти много полезной информации, а также познакомится с людьми которые только начинают или уже начали свой путь верстальщика.
Не забывайте оставлять свои комментарии, а также если у вас есть интересная тема для следующей статьи, то вы можете написать ее в комментариях или отправить на почту nd.webdew@gmail.com и я постараюсь ее для вас сделать. Всем спасибо за внимание и пусть баги будут фичами!
комментарии (0)
написать комментарийкомментариев нет