• Страница 1 из 1
  • 1
Preloader для uCoz
Kentos311Дата: Вторник, 09.01.2018, 00:08 | Сообщение # 1
Сообщений: 729
Статус:

Preloader для uCoz - Очень полезный скрипт в загрузке вашего сайта. Для качественной работы на вашем ресурсе осуществляется тогда когда сайт полностью загрузился с элементами дизайна. Preloader - как раз дает такую возможность, пока что дизайн не про грузится он вам не даст работу с сайтом, вы не сможете никуда нажать так как он будет загружать сайт. Данный скрипт отлично работает на сайтах где установлен красивый дизайн который наполнен мало весом скриптов, и где отключена реклама от uCoz. Он будет заходить и загружать всё быстро, ну а если естественно ваш сайт наполнен разными скриптами и ещё дополнительно стоит реклама, то вам ресурс он будет подгружать сильно.

Скрипт работает очень просто

Вставьте код в «Нижнюю часть сайта»:
Код
<!-- Начало:Preloader -->
<div id="preloader">
  <div id="preloader-lines">
  <div id="preloader-lines__mask"></div>
  </div>
</div>
<script>
  jQuery(function($) {
  $(window).load(function() {
  $("#preloader").fadeOut(700);
  };);
  };);
</script>
<style>
  /* Preloader */
  #preloader {
  background-color: #123;
  bottom: 0;
  display: block;
  height: 100%;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 11000;
  }
  #preloader-lines {
  width: 300px;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f25;
  }
  #preloader-lines::before,
  #preloader-lines::after {
  content: '';
  width: 75%;
  height: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: #f25;
  animation: sub-lines 4s cubic-bezier(0.25, 0.65, 1, 0.85) infinite;
  }
  #preloader-lines::before {
  top: -20px;
  }
  #preloader-lines::after {
  bottom: -20px;
  }
  #preloader-lines__mask {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 20;
  background-color: #123;
  animation: mask 4s cubic-bezier(0.25, 0.65, 1, 0.85) infinite;
  }
  @keyframes mask {
  0% {
  transform: scale(1, 1);
  }
  25% {
  transform: scale(0, 1);
  }
  75% {
  transform: scale(0, 1);
  }
  100% {
  transform: scale(1, 1);
  }
  }
  @keyframes sub-lines {
  0% {
  transform: translateX(-50%) scale(0, 1);
  }
  25% {
  transform: translateX(-50%) scale(0, 1);
  }
  50% {
  transform: translateX(-50%) scale(1, 1);
  }
  75% {
  transform: translateX(-50%) scale(0, 1);
  }
  100% {
  transform: translateX(-50%) scale(0, 1);
  }
  }
</style>
<!-- Конец:Preloader -->


Установка этого скрипта Preloader очень простая, нужно код расположить в нижней части вашего сайта, на черном дизайне сайта этот Preloader очень красиво будет смотреться.
Прикрепления: 0713830.gif (38.0 Kb)
 
  • Страница 1 из 1
  • 1
Поиск: