Обратите внимание:
Во всех примерах анимация будет срабатывать по клику на ссылке, кроме:
- значения, начинающегося на
javascript - значения, начинающегося на
# - класса
fancybox - атрибута
target - атрибута
data-fancybox
Вариант 1:
Простой вариант с появлением и затуханием страницы, основанный на jQuery методах fadeIn и fadeOut
|
1 2 3 |
body { display: none; } |
|
1 2 3 4 5 6 7 8 9 10 11 |
$(window).on('load pageshow', function () { $('body').fadeIn(); }); $("a:not([href*=javascript]):not([href*=\\#]):not(.fancybox):not([target]):not([data-fancybox])").click(function() { $('body').fadeOut(); let url = $(this).attr('href'); window.setTimeout(function() { window.location.href = url; }, 500); return false; }); |
Вариант 2:
В этом варианте после загрузки страницы мы последовательно скрываем закрывавшие ее кубики, а при переходе на новую обратно показываем.
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="preloader"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
.preloader { position: fixed; z-index: 9999999999; top: 0; left: 0; height: 100vh; width: 100vw; display: flex; } .preloader span { position: relative; height: 100vh; width: 100%; display: flex; background-color: #FFF; transition: 0.4s; } .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; } .preloader.off span { opacity: 1; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(window).on('load pageshow', function () { $('.preloader').removeClass("off"); $('.preloader').addClass("on"); }); $("a:not([href*=javascript]):not([href*=\\#]):not(.fancybox):not([target]):not([data-fancybox])").click(function() { $('.preloader').removeClass("on"); $('.preloader').addClass("off"); let url = $(this).attr('href'); window.setTimeout(function() { window.location.href = url; }, 550); return false; }); |
Вариант 3:
В этом варианте мы анимируем не наложенные сверху страницы слои, а ее саму.
|
1 2 3 4 5 6 7 8 9 10 11 |
body { transform: translateX(-100%); transition: transform 0.4s; background: #FFF; } body.on { transform: translateX(0); } body.off { transform: translateX(100%); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(window).on('load pageshow', function () { $('body').removeClass("off"); $('body').addClass("on"); }); $("a:not([href*=javascript]):not([href*=\\#]):not(.fancybox):not([target]):not([data-fancybox])").click(function() { $('body').removeClass("on"); $('body').addClass("off"); let url = $(this).attr('href'); window.setTimeout(function() { window.location.href = url; }, 400); return false; }); |
Попробовал 2-й вариант. Прикольно, но при открытии изображений по типу "Fancybox" происходит аналогичный "переход" и по факту изображение не открывается в "модельном окне". Поэтому код подправил из расчета, что все изображения берутся из папки uploads, заменил соответствующую строку на: $('a:not([href*="uploads"])').click(function() {
может, кому поможет...
P.S. автору естественно спасибо 🙂
Спасибо за замечание, совсем забыл про модальные окна.
Поправил код в примерах
тогда я лучше ваш код возьму. Он однозначно умнее 🙂