Заказать эффект

Интерфейсfx/17

AW-Flow — Page Fade

Переход между страницами без резкой смены: экран мягко закрывается цветом и открывает следующую страницу.

Запуск
на весь сайт
Параметров
4
Телефоны
свои настройки
Код
на весь сайт
весь сайт

Готовый код

Это тот же код, что сейчас работает в превью: значения подставлены из конструктора, внешние библиотеки не нужны.

для всего сайта2,3 КБ · HTML + CSS + JS
<!-- AW-Flow — Page Fade · код для всего сайта, префикс классов: awf-page-fade -->
<style>
.awf-page-fade {
  --awf-color: #ffffff;
  --awf-duration: 450ms;
  --awf-ease: cubic-bezier(0.5, 1, 0.89, 1);
}
.awf-page-fade {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  background: var(--awf-color);
  opacity: 1;
  transition: opacity var(--awf-duration) var(--awf-ease);
}
.awf-page-fade.awf-hide { opacity: 0; }
/* уважение к настройке «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  .awf-page-fade { display: none; }
}
</style>
<script>
(function () {
  var CLS = 'awf-page-fade';
  if (window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches) return;
  // шторка создаётся сразу, ещё до отрисовки страницы
  var veil = document.createElement('div');
  veil.className = CLS;
  document.documentElement.appendChild(veil);
  function hide() {
    requestAnimationFrame(function () { requestAnimationFrame(function () { veil.classList.add('awf-hide'); }); });
  }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', hide);
  else hide();
  setTimeout(function () { veil.classList.add('awf-hide'); }, 3000); // страховка
  window.addEventListener('pageshow', function (e) { if (e.persisted) veil.classList.add('awf-hide'); });
  document.addEventListener('click', function (e) {
    if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
    var a = e.target && e.target.closest ? e.target.closest('a[href]') : null;
    if (!a || a.target === '_blank' || a.hasAttribute('download')) return;
    var href = a.getAttribute('href') || '';
    // якоря, попапы Tilda (#popup:...), почта и телефон — без перехода
    if (!href || href.charAt(0) === '#' || /^(mailto|tel|javascript):/i.test(href)) return;
    if (a.origin !== location.origin) return;
    if (a.pathname === location.pathname && a.search === location.search && a.hash) return;
    e.preventDefault();
    veil.classList.remove('awf-hide');
    var d = parseFloat(getComputedStyle(veil).getPropertyValue('--awf-duration')) || 400;
    setTimeout(function () { location.href = a.href; }, d);
  });
})();
</script>

Вставляется один раз — в код всего сайта.

Как подключить в Tilda

Этот эффект действует на весь сайт, поэтому код вставляется не в блок, а в настройки сайта.

  1. Откройте вставку кода. «Настройки сайта» → «Вставка кода» → поле «HTML-код для вставки внутрь head».
  2. Вставьте код целиком и сохраните. Код добавляется один раз и работает на всех страницах сайта.
  3. Переопубликуйте все страницы. Без этого код не попадёт на уже опубликованные страницы.
  4. Нужно только на одной странице? Тогда вставьте код в «Настройки страницы» → «Дополнительно» → «HTML-код для вставки внутрь head» и опубликуйте эту страницу.
  5. Хотите поменять вид? Настройте эффект здесь заново и замените старый код новым — цвета, тексты и время уже вшиты в код.
  6. Какие ссылки. Переход срабатывает на внутренних ссылках сайта. Якоря, попапы Tilda (#popup), почта, телефон и ссылки в новой вкладке работают как обычно.
Ещё в разделе «Интерфейс»Весь каталог