Привет, друзья!
Дизайн сайта складывается из мелочей, и одна из таких важнейших мелочей — это то, как пользователь переходит со страницы на страницу.
Резкие белые вспышки, дергающиеся элементы во время прогрузки дизайна — все это портит впечатление от сайта и заставляет его выглядеть «дешево».

Сегодня мы решим эту проблему раз и навсегда с помощью каскадного прелоадера. Этот скрипт создает потрясающий визуальный эффект: при клике на любую ссылку экран плавно закрывается вертикальными полосами (всего их 9), а после полной загрузки новой страницы эти полосы так же плавно, одна за другой, исчезают.
Результат — бесшовный, «кинематографичный» переход, который маскирует время загрузки страниц и делает ваш сайт похожим на современное веб-приложение.

🛠 Как это работает изнутри?
Скрипт состоит из трех логических частей:
HTML-структура: 9 пустых тегов <span> внутри главного контейнера. Каждая полоса — это отдельный элемент.
Умный JavaScript (jQuery): Скрипт перехватывает клики по ссылкам.
Он проверяет, чтобы это не были ссылки-скрипты (javascript:), якоря (#) или всплывающие окна (fancybox). Если ссылка ведет на другую страницу, скрипт плавно закрывает экран полосами, делает задержку в 550 миллисекунд (пока идет анимация) и затем перенаправляет пользователя.

CSS3 Магия: Самое интересное! Для каждой из 9 полос задана своя задержка анимации (transition-delay) с шагом в 0.05s. Именно это создает красивый «эффект волны» или каскада.

🚀 Инструкция по установке
Установка универсальна и подойдет для любой CMS (включая uCoz), где подключена библиотека jQuery.

Шаг 1. Добавляем код на сайт
Вставьте этот готовый блок в нижнюю часть сайта (в uCoz — в «Нижняя часть сайта» / Global block, либо перед тегом </body>):

Код

<div class="custom-page-loader">  
  <span></span>  
  <span></span>  
  <span></span>  
  <span></span>  
  <span></span>  
  <span></span>  
  <span></span>  
  <span></span>  
  <span></span>  
</div>  

<script type="text/javascript">  
$(window).on('load pageshow', function () {  
  // Когда страница полностью загрузилась — убираем прелоадер  
  $('.custom-page-loader').removeClass("loader-state-off").addClass("loader-state-on");  
});  

// Перехват клика по ссылкам (исключая якоря, JS-скрипты и попапы)  
$("a:not([href*=javascript]):not([href*=\\#]):not(.fancybox):not([target]):not([data-fancybox])").click(function() {  
  $('.custom-page-loader').removeClass("loader-state-on").addClass("loader-state-off");  
  let url = $(this).attr('href');  

  // Небольшой таймаут, чтобы анимация закрытия успела проиграться  
  window.setTimeout(function() {  
  window.location.href = url;  
  }, 550);  
  return false;  
});  
</script>  

<style>  
.custom-page-loader {  
  position: fixed;  
  z-index: 9999999999; /* Поверх всех элементов */  
  top: 0;  
  left: 0;  
  height: 100vh;  
  width: 100vw;  
  display: flex;  
  pointer-events: none; /* Чтобы не мешать кликам, пока скрыт */  
}  

.custom-page-loader span {  
  position: relative;  
  height: 100vh;  
  width: 100%;  
  display: flex;  
  background-color: #fff; /* Цвет полос (можно изменить на свой) */  
  transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);  
  opacity: 1;  
}  

/* Каскадный эффект: задаем шаг задержки для каждой полосы */  
.custom-page-loader span:nth-child(2) { transition-delay: 0.05s; }  
.custom-page-loader span:nth-child(3) { transition-delay: 0.1s; }  
.custom-page-loader span:nth-child(4) { transition-delay: 0.15s; }  
.custom-page-loader span:nth-child(5) { transition-delay: 0.2s; }  
.custom-page-loader span:nth-child(6) { transition-delay: 0.25s; }  
.custom-page-loader span:nth-child(7) { transition-delay: 0.3s; }  
.custom-page-loader span:nth-child(8) { transition-delay: 0.35s; }  
.custom-page-loader span:nth-child(9) { transition-delay: 0.4s; }  

/* Состояние: Страница загружена (скрываем полосы) */  
.custom-page-loader.loader-state-on {  
  visibility: hidden;  
}  
.custom-page-loader.loader-state-on span {  
  opacity: 0;  
  transform: scaleY(0); /* Дополнительный эффект сжатия по вертикали */  
}  

/* Состояние: Клик по ссылке (показываем полосы) */  
.custom-page-loader.loader-state-off {  
  visibility: visible;  
}  
.custom-page-loader.loader-state-off span {  
  opacity: 1;  
  transform: scaleY(1);  
}  
</style>
  


🎨 Кастомизация под ваш дизайн
Вы можете легко изменить этот прелоадер под цветовую гамму своего сайта.

Для этого в CSS найдите строку:
background-color: #FFF;
И замените #FFF (белый цвет) на любой другой. Например, для темного сайта отлично подойдет #111 или фирменный цвет вашего бренда.

Пробуйте, ставьте на свои сайты и делитесь впечатлениями в комментариях! Как вам такой эффект перелистывания страниц?