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

Текст · Ховерfx/07

AW-Flow — Hover Fill

При наведении текст заливается цветом или подчёркивается линией, которая пробегает по строке.

Запуск
по наведению
Параметров
7
Телефоны
свои настройки
Код
HTML-блок
.awf-text-hover-fill

Готовый код

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

класс: awf-text-hover-fill1,5 КБ · HTML + CSS + JS
<!-- AW-Flow — Hover Fill · класс элемента: awf-text-hover-fill -->
<style>
.awf-text-hover-fill {
  --awf-color: #7c5cff;
  --awf-duration: 550ms;
  --awf-ease: cubic-bezier(0.33, 1, 0.68, 1);
}
.awf-text-hover-fill .awf-hl {
  background-image: linear-gradient(90deg, var(--awf-color) 50%, currentColor 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position var(--awf-duration) var(--awf-ease);
}
.awf-text-hover-fill:hover .awf-hl { background-position: 0 0; }
/* уважение к настройке «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  .awf-text-hover-fill .awf-hl { transition: none; }
}
</style>
<script>
(function () {
  var CLS = 'awf-text-hover-fill';
  // оборачиваем текст элемента в строчный span — на нём рисуется заливка/линия
  function init() {
    [].forEach.call(document.querySelectorAll('.' + CLS), function (el) {
      if (el.getAttribute('data-awf')) return;
      el.setAttribute('data-awf', '1');
      var root = el.querySelector('.tn-atom') || el;
      var span = document.createElement('span');
      span.className = 'awf-hl';
      while (root.firstChild) span.appendChild(root.firstChild);
      root.appendChild(span);
    });
  }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
  else init();
})();
</script>

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

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

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

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