Код preloader загрузки страницы сайта - Скрипты - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 12
Гостей: 12
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Скрипты


Красивая загрузка страницы при помощи скрипта Preloader для сайта. Сам он простой и по установки аналогично, что сами поставить картинку. Работать он будет при загрузки любой странице на интернет ресурсе. Это появится с начало прозрачный темно светлый форум, и по центру уже будет изображение, которое будет на ссылки. Здесь вы можете ставить разную, можно менять под различные праздники. С кодом идет стили, которые нужно поставить в CSS И вот в нем можно редактировать основной дизайн.

Здесь мы видим, что все происходит на светлом квадрате без углов, и на нем Preloader крутиться.



Но если мы из стиля уберем background:#FFF; так как уже будет такое визуальное обозрение.



Приступаем к установке:

В низ сайта ставим сначало этот скрипт.
Код
<script type="text/javascript">  
jQuery(function($) {  
$(window).load(function () {  
$(".preloader").fadeOut(700);  
});  
});  
</script>


И ниже добавляем:

Здесь мы видим как раз место под ссылку, что находим что вам нужно и меняем. И ваше изображение появиться при загрузки.
Код
<div class="preloader">  
<div class="loading">  
<div class="loading_in">  
<img src="http://zornet.ru/Aben/7e56.gif" alt="" />  
</div>  
</div>  
</div>


CSS
Код
.preloader {background:rgba(0,0,0,0.8);position:fixed;top:0;left:0;right:0;bottom:0;z-index:5000;display:table;width:100%;height:100%;}  
.loading {display:table-cell;width:100%;height:100%;vertical-align:middle;text-align: center;}  
.loading_in {display:inline-block;padding:40px;background:#FFF;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px}

Важно!

При копировании материала указывать ссылку на источник.

- 571
- 27-Декабря-2016
- 0
Материал разместил:

Похожий материал
Статьи сайта