Вид загрузки Preloader для сайта uCoz
 | |
| Этот материал идет под загрузку страниц для сайта uCoz, где при переходе все наблюдают анимацию, что происходит до полной загрузки страницы. Как вообще работает такой скрипт, то здесь многие встречали на разных сайтах, где при переходе появляется изображение, так называемый Preloader, только здесь все настроено под конструктор, хотя на сайте codepen, где идет demo страница, этот скрипт отлично и корректно работает. Но здесь плюс в том, что тематически его сделать не сложно, только нужно поменять ссылку, которая идет на формате gif. Так что устанавливаем скрипт в низ сайта, это чтоб его можно было при загрузке на всех страницах наблюдать. Но потом вы можете найти интересное решение, что показывается в анимации, и поменять в самом коде. Также ниже оставлю одно предложение, ведь зайдя в поиск можно найти много, но здесь нужно рассчитывать еще на размеры. Вот этот загрузчик закрепил, где копируем ссылку и меняем, если кого больше устраивает. Ведь искал такую тему, чтоб могла картинка подойти под множество тематических направлений сайта.  Установка: Чтоб наблюдать эффект загрузки на всех страницах, включая все модули. То остается зайти в админ панель и вниз или вверх сайта устанавливаем и сохраняем. Код <style type="text/css">#kogedsavunad>p{display:none;}#bteditok_labedukagu_vaced{display: block;position: fixed;z-index: 99999;top: 0;left: 0;width: 100%;height: 100%;min-width: 1000px;background: #ecd37011 url(http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/Loading_icon.gif) center center no-repeat;background-size:238px;}</style> <div id="kogedsavunad"><div id="bteditok_labedukagu_vaced"></div></div> <script type="text/javascript">var ufive_loadpreloader = document.getElementById("bteditok_labedukagu_vaced");function fadeOutnojquery(el){el.style.opacity = 1;var ufiveloadpreloader = setInterval(function(){el.style.opacity = el.style.opacity - 0.05;if (el.style.opacity <=0.05){ clearInterval(ufiveloadpreloader);ufive_loadpreloader.style.display = "none";}},16);}window.onload = function(){setTimeout(function(){fadeOutnojquery(ufive_loadpreloader);},1000);};</script> Выставлен gif анимации загрузки на прозрачном фоне, а значит вы можете задать любой оттенок, даже поставить градиенты, все отлично просматривается. Ведь не весь формат gif идет на прозрачном фоне, у многих он по умолчанию задан, что если понравился элемент анимации, то останется под него оттенок фона выставить. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 5 | |
|
| |
