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

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

AW-Flow — Preloader — Logo Reveal

Буквы логотипа выезжают по очереди, а затем экран загрузки уходит вверх шторкой или растворяется.

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

Готовый код

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

для всего сайта2,8 КБ · HTML + CSS + JS
<!-- AW-Flow — Preloader — Logo Reveal · код для всего сайта, префикс классов: awf-preloader-logo -->
<style>
.awf-preloader-logo {
  --awf-size: 64px;
  --awf-bg: #0c0c14;
  --awf-color: #ffffff;
  --awf-stagger: 60ms;
  --awf-duration: 700ms;
}
.awf-preloader-logo {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--awf-bg);
  color: var(--awf-color);
  transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s linear 0.9s;
}
.awf-preloader-logo.awf-done { transform: translate3d(0, -100%, 0); visibility: hidden; }
.awf-preloader-logo-logo {
  display: flex;
  overflow: hidden;
  padding: 0.12em 0;
  font-family: TildaSans, Arial, sans-serif;
  font-size: var(--awf-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.awf-preloader-logo-logo span {
  display: inline-block;
  transform: translate3d(0, 115%, 0);
  animation: awf-preloader-logo-in var(--awf-duration) cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--i) * var(--awf-stagger));
}
.awf-preloader-logo-logo .awf-sp { width: 0.28em; }
@keyframes awf-preloader-logo-in { to { transform: none; } }
/* уважение к настройке «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  .awf-preloader-logo, .awf-preloader-logo-logo span { transition: none; animation: none; transform: none; }
}
</style>
<script>
(function () {
  var CLS = 'awf-preloader-logo';
  var TEXT = "Brand";
  var MIN = 1400; // минимальное время показа, мс
  var start = Date.now(), done = false;
  var pl = document.createElement('div');
  pl.className = CLS;
  pl.setAttribute('aria-hidden', 'true');
  var logo = document.createElement('div');
  logo.className = CLS + '-logo';
  Array.from(TEXT).forEach(function (ch, i) {
    var s = document.createElement('span');
    if (ch === ' ') s.className = 'awf-sp'; else s.textContent = ch;
    s.style.setProperty('--i', i);
    logo.appendChild(s);
  });
  pl.appendChild(logo);
  document.documentElement.appendChild(pl);
  function finish() {
    if (done) return;
    done = true;
    // ждём, пока буквы доедут, но не меньше MIN
    var cs = getComputedStyle(pl);
    var intro = (parseFloat(cs.getPropertyValue('--awf-duration')) || 0) + (parseFloat(cs.getPropertyValue('--awf-stagger')) || 0) * TEXT.length;
    setTimeout(function () {
      pl.classList.add('awf-done');
      setTimeout(function () { pl.remove(); }, 1000);
    }, Math.max(0, Math.max(MIN, intro) - (Date.now() - start)));
  }
  if (document.readyState === 'complete') finish();
  else window.addEventListener('load', finish);
  setTimeout(finish, 10000); // страховка
})();
</script>

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

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

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

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