Шторка между страницами

Клик по ссылке: цветная шторка накрывает экран, страница меняется, шторка уходит вверх.

Жмите кнопку в демо.

Страница A

Нажмите кнопку — шторка накроет экран, «страница» сменится, шторка уйдёт.

Страница B

Это второй экран. Кнопка вернёт обратно тем же переходом.

Код

<div class="wipe"></div>  <!-- фиксированная шторка -->

<style>
.wipe { position: fixed; inset: 0; z-index: 99; background: #E84B16;
  transform: translateY(101%); pointer-events: none; }
body.go .wipe {
  animation: wIn .55s cubic-bezier(.7,0,.3,1) forwards,
             wOut .55s cubic-bezier(.7,0,.3,1) .6s forwards; }
@keyframes wIn  { to { transform: translateY(0); } }
@keyframes wOut { to { transform: translateY(-101%); } }
</style>

<script>
// перехват внутренних ссылок: шторка вниз → навигация → шторка вверх
document.querySelectorAll('a[href^="/"]').forEach(function (a) {
  a.addEventListener("click", function (e) {
    e.preventDefault();
    document.body.classList.add("go");
    setTimeout(function () { location.href = a.href; }, 560);
  });
});
// на новой странице шторка стартует закрытой и уезжает:
// body.entering .wipe { transform:none; animation: wOut .55s .1s forwards }
</script>

Промпт для ИИ

Сделай переход между страницами шторкой: фиксированный слой поверх всего (transform translateY(101%), pointer-events none). Клик по внутренней ссылке: preventDefault, шторка въезжает снизу за 0.55s по cubic-bezier(0.7,0,0.3,1), в момент полного накрытия — location.href. На новой странице шторка стартует закрытой (класс на body из inline-скрипта в head) и уезжает вверх через 0.1s. Итог: бесшовная смена страниц. Для SPA — то же самое вокруг роутера.