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

Текст · Появлениеfx/01

AW-Flow — Fade Reveal

Текст проявляется мягкой волной прозрачности: край градиента проходит по строкам в выбранную сторону.

Запуск
при появлении в экране
Параметров
9
Телефоны
свои настройки
Код
HTML-блок
.awf-text-fade

Готовый код

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

класс: awf-text-fade2,5 КБ · HTML + CSS + JS
<!-- AW-Flow — Fade Reveal · класс элемента: awf-text-fade -->
<style>
.awf-text-fade {
  --awf-blur: 4px;
  --awf-duration: 1300ms;
  --awf-delay: 0ms;
  --awf-ease: cubic-bezier(0.5, 1, 0.89, 1);
}
.awf-text-fade {
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  filter: blur(var(--awf-blur));
  transition: -webkit-mask-position var(--awf-duration) var(--awf-ease) var(--awf-delay),
    mask-position var(--awf-duration) var(--awf-ease) var(--awf-delay),
    filter var(--awf-duration) var(--awf-ease) var(--awf-delay);
}
.awf-text-fade.awf-in {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  filter: blur(0);
}
.awf-text-fade.awf-off,
.awf-text-fade.awf-off * { transition: none !important; }
/* уважение к настройке «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  .awf-text-fade { -webkit-mask-image: none; mask-image: none; filter: none; transition: none; }
}
</style>
<script>
(function () {
  var CLS = 'awf-text-fade';
  var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;
  function prepare(el) { }
  function play(el) {
    el.classList.add('awf-in');
  }
  function stop(el) {
    // мгновенный сброс в начальное состояние, без обратной анимации
    el.classList.add('awf-off');
    el.classList.remove('awf-in');
    void el.offsetWidth;
    el.classList.remove('awf-off');
  }
  function init() {
    var els = [].slice.call(document.querySelectorAll('.' + CLS)).filter(function (el) {
      if (el.getAttribute('data-awf')) return false;
      el.setAttribute('data-awf', '1');
      prepare(el);
      el.classList.add('awf-ready');
      return true;
    });
    if (reduce) { els.forEach(play); return; }
    if (!('IntersectionObserver' in window)) { els.forEach(play); return; }
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (e) {
        if (e.isIntersecting) { play(e.target); io.unobserve(e.target); }
      });
    }, { threshold: 0.2 });
    els.forEach(function (el) { io.observe(el); });
  }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
  else init();
})();
</script>

Вставляется в HTML-блок на той же странице, где элемент с классом.

Как добавить в Tilda

Эффект работает на опубликованной странице и в режиме предпросмотра — в самом редакторе Tilda скрипты не выполняются.

  1. Назначьте класс элементу. В Zero Block кликните правой кнопкой по нужному элементу — текстовому и выберите пункт добавления CSS-класса (Add CSS class name). Впишите awf-text-fade — без точки. Класс ставится на сам элемент, не на весь артборд.
  2. Добавьте HTML-блок. На этой же странице добавьте блок T123 «HTML-код» (проще всего найти поиском в библиотеке блоков) или элемент HTML внутри Zero Block.
  3. Вставьте код. Скопируйте код целиком и вставьте в этот HTML-блок, сохраните и опубликуйте страницу.
  4. Меняете настройки? Сначала удалите старый код этого эффекта, затем вставьте новый и снова опубликуйте страницу.
  5. Разные настройки — разные классы. Для второго варианта на той же странице задайте в конструкторе другой класс, например awf-text-fade-2, и вставьте его код отдельно.
Ещё в разделе «Текст»Весь каталог