Bardzo szybki CSS - hacky text fill

Omawiamy kolejne rozwiązanie znalezione w internecie. Tym razem – efekt wypełnienia tekstu innym kolorem po najechaniu myszą. Nie jest to najlepsze rozwiązanie do efektu text-fill, ale pokazuje kilka ciekawych konceptów, więc je sobie omówimy.

Autor dodaje nagłówek z pewnym tekstem i duplikuje ten tekst do data-setu:

<h1 class="text" data-text="text">Text</h1>

Następnie dodaje klasę CSS:

.text {
  position: relative;
  font-size: 20px;
  font-weight: bold;
  color: #111;
  margin: 0;
  padding: 0;
  line-height: 1;
}

Nie widzimy tutaj nic wykraczającego poza podstawy, aby to komentować. Następnie klasa z pseudo-elementem before:

.text::before {
  content: attr(data-text);
  position: absolute;
  z-index: 1;
  color: #0ea5e9;
  pointer-events: none;

  width: 0;
  overflow: hidden;
}

Tutaj jako 'content’ użyto funkcji 'attr’, która pobiera tekst z data-setu. O takich rozwiązaniach mówi się „hacky”. Ciekawe, warto znać. Właściwość 'width” ustawiona na 0 powinna przypominać nam wszystkie animowane podkreślenia jadące z jednej strony (lewej lub prawej) i rozciągające się na całe 100% podczas hovera.

Tutaj natomiast mamy de facto drugi tekst innego koloru, zatem musimy go ukryć – overflow: hidden.

Teraz tylko odpowiedni selektor (.text:hover::before) i rozciągnięcie naszego pseudo-elementu na całe 100% długości plus transition na animowanym elemencie:

.text::before {
  content: attr(data-text);
  position: absolute;
  z-index: 1;
  color: #0ea5e9;
  pointer-events: none;
  width: 0;
  overflow: hidden;

  transition: 0.4s ease-out width;
}

.text:hover::before {
  width: 100%;
}

Oczywiście przy wielowyrazowych tekstach to nie będzie działać idealnie. Jak zrobić text-fill najlepiej według mnie napiszę niedługo. Tym niemniej jest tutaj kilka ciekawych rozwiązań, które warto sobie w głowie odnotować.

Ponadto dodam, że animacja pokazująca działanie tej animacji na blogu autora jest ciekawsza niż sam omawiany przypadek.

Odsyłam na bloga autora: https://tahazsh.com/blog/text-fill-animation.

Bardzo szybki CSS – hacky text fill