Анимация при загрузке страницы.
Всем привет! В этой статье мы рассмотрим, как сделать анимацию, которая будет показываться при загрузке DOM.
Для этого вам нужно перейти сюда, скачать с помощью Bower или кнопок на сайте библиотеку.
Создайте div на странице
<div id="fakeLoader"></div>
Подключите стили
<link rel="stylesheet" href="yourPath/fakeLoader.css">
Подключите скрипты
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<script src="yourPath/fakeLoader.min.js">
Проведите базовую инициализацию
<script type="text/javascript">
$("#fakeloader").fakeLoader();
</script>
Установите опции, если нужно
<script type="text/javascript">
$("#fakeloader").fakeLoader({
timeToHide:1200, // Время в миллисекундах для исчезновения прелоадера
zIndex:"999",// Z-Index по умолчанию
spinner:"spinner1",// Опциии: 'счетчик 1', 'счетчик 2', 'счетчик 3', 'счетчик 4', 'счетчик 5', 'счетчик 6', 'счетчик 7'
bgColor:"#2ecc71", //Hex, RGB или RGBA цвета
imagePath:"yourPath/customizedImage.gif" // Если вы хотите, то можете установить свою картинку
});
</script>
Вот и все! Спасибо за внимание!
-
Создано 20.05.2015 19:00:00
-
Михаил Русаков
Комментарии (3):
спасибо вам!
Ответить
Не работает Михаил попробуйте сами там где то ошибка.
Ответить
<div id="preloader"></div><script type="text/javascript"> $(document).ready(function(){ var settings = $.extend({ timeToHide:1200, }); setTimeout(function(){ $("#preloader").fadeOut(); }, settings.timeToHide); function centerLoader() { $("#preloader").html('<img src="preloader.gif">'); } $(window).load(function(){ centerLoader(); $(window).resize(function(){ centerLoader(); }); }); }); </script>
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.