Код preloader загрузки страницы сайта
 | |
| Красивая загрузка страницы при помощи скрипта 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} PS - думаю этот материал загрузки самый простой как по своему коду и установки на сайт. Источник: madeas.ru | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 6 | |
Таких прелоадеров в сети много, но этот вариант можно улучшить:
 - при использовании условных операторов ucoz и изображения, не крутящейся штуки, прыгающих шариков или т.пд., а именно картинки (в нашем случае пусть будет самолёт ) можно сделать интересную загрузку: 1. Берём условные операторы <?if($WDAY$="Пн")?>, <?if($WDAY$="Вт")?>, ... у вас это может быть Понедельник, Вторник,... 2. Подключаем стиль для класса loading : Код .loading { display:table-cell; background:#fff url(http://madeas.ru/background/test-04.gif) 50% 50% no-repeat; background-size:40%; vertical-align:middle; text-align: center; } 3. Добавляем свойство transform (собственно для этого мы и подключаем условный оператор) Код .loading { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg) } И получаем самолёт летящий в сторону. Для того, чтобы самолёт летал в зависимости от дня недели, вы можете поменять в свойстве transform переменную 0deg на свою, например 45deg. Тогда самолёт полетит, хз куда, надо проверять =) Ну вы поняли... удачной реализации. | |
