Дизайн сайта складывается из мелочей, и одна из таких важнейших мелочей — это то, как пользователь переходит со страницы на страницу.
Резкие белые вспышки, дергающиеся элементы во время прогрузки дизайна — все это портит впечатление от сайта и заставляет его выглядеть «дешево».
Сегодня мы решим эту проблему раз и навсегда с помощью каскадного прелоадера. Этот скрипт создает потрясающий визуальный эффект: при клике на любую ссылку экран плавно закрывается вертикальными полосами (всего их 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="preloader">
<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 () {
// Когда страница полностью загрузилась — убираем прелоадер
$('.preloader').removeClass("off").addClass("on");
});
// Перехват клика по ссылкам (исключая якоря, JS-скрипты и попапы)
$("a:not([href*=javascript]):not([href*=\\#]):not(.fancybox):not([target]):not([data-fancybox])").click(function() {
$('.preloader').removeClass("on").addClass("off");
let url = $(this).attr('href');
// Небольшой таймаут, чтобы анимация закрытия успела проиграться
window.setTimeout(function() {
window.location.href = url;
}, 550);
return false;
});
</script>
<style>
.preloader {
position: fixed;
z-index: 9999999999; /* Поверх всех элементов */
top: 0;
left: 0;
height: 100vh;
width: 100vw;
display: flex;
pointer-events: none; /* Чтобы не мешать кликам, пока скрыт */
}
.preloader 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;
}
/* Каскадный эффект: задаем шаг задержки для каждой полосы */
.preloader span:nth-child(2) { transition-delay: 0.05s; }
.preloader span:nth-child(3) { transition-delay: 0.1s; }
.preloader span:nth-child(4) { transition-delay: 0.15s; }
.preloader span:nth-child(5) { transition-delay: 0.2s; }
.preloader span:nth-child(6) { transition-delay: 0.25s; }
.preloader span:nth-child(7) { transition-delay: 0.3s; }
.preloader span:nth-child(8) { transition-delay: 0.35s; }
.preloader span:nth-child(9) { transition-delay: 0.4s; }
/* Состояние: Страница загружена (скрываем полосы) */
.preloader.on {
visibility: hidden;
}
.preloader.on span {
opacity: 0;
transform: scaleY(0); /* Дополнительный эффект сжатия по вертикали */
}
/* Состояние: Клик по ссылке (показываем полосы) */
.preloader.off {
visibility: visible;
}
.preloader.off span {
opacity: 1;
transform: scaleY(1);
}
</style>
<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 () {
// Когда страница полностью загрузилась — убираем прелоадер
$('.preloader').removeClass("off").addClass("on");
});
// Перехват клика по ссылкам (исключая якоря, JS-скрипты и попапы)
$("a:not([href*=javascript]):not([href*=\\#]):not(.fancybox):not([target]):not([data-fancybox])").click(function() {
$('.preloader').removeClass("on").addClass("off");
let url = $(this).attr('href');
// Небольшой таймаут, чтобы анимация закрытия успела проиграться
window.setTimeout(function() {
window.location.href = url;
}, 550);
return false;
});
</script>
<style>
.preloader {
position: fixed;
z-index: 9999999999; /* Поверх всех элементов */
top: 0;
left: 0;
height: 100vh;
width: 100vw;
display: flex;
pointer-events: none; /* Чтобы не мешать кликам, пока скрыт */
}
.preloader 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;
}
/* Каскадный эффект: задаем шаг задержки для каждой полосы */
.preloader span:nth-child(2) { transition-delay: 0.05s; }
.preloader span:nth-child(3) { transition-delay: 0.1s; }
.preloader span:nth-child(4) { transition-delay: 0.15s; }
.preloader span:nth-child(5) { transition-delay: 0.2s; }
.preloader span:nth-child(6) { transition-delay: 0.25s; }
.preloader span:nth-child(7) { transition-delay: 0.3s; }
.preloader span:nth-child(8) { transition-delay: 0.35s; }
.preloader span:nth-child(9) { transition-delay: 0.4s; }
/* Состояние: Страница загружена (скрываем полосы) */
.preloader.on {
visibility: hidden;
}
.preloader.on span {
opacity: 0;
transform: scaleY(0); /* Дополнительный эффект сжатия по вертикали */
}
/* Состояние: Клик по ссылке (показываем полосы) */
.preloader.off {
visibility: visible;
}
.preloader.off span {
opacity: 1;
transform: scaleY(1);
}
</style>
🎨 Кастомизация под ваш дизайн
Вы можете легко изменить этот прелоадер под цветовую гамму своего сайта.
Для этого в CSS найдите строку:
background-color: #FFF;
И замените #FFF (белый цвет) на любой другой. Например, для темного сайта отлично подойдет #111 или фирменный цвет вашего бренда.
Пробуйте, ставьте на свои сайты и делитесь впечатлениями в комментариях! Как вам такой эффект перелистывания страниц?
