Wiele osób zapewne mało kojarzy stare maszyny do pisania… Wpis z prostym i przyjemnym efektem tekstu maszynowego za pomocą HTML i CSS3, który można wykorzystać np. w banerach.

<p class="text">Proin vel lorem id sollicitudin...</p>
Copy

A teraz kawałek CSS-a do animacji tekstu pisanego z HTML-a:

.text {
  font-size: 5em;
  width: 34ch; /* "szerokość" naszego tekstu, ile znaków */
  animation: typewriter 4s steps(34); /* animacja, czas, liczba kroków */
  animation-iteration-count: infinite;
  overflow:hidden;
  white-space: nowrap;
}
@keyframes typewriter {
  0% {
    width: 0ch;
  }
  100% {
    width: 34ch;
  }
}
Copy

Animacja tekstu maszyny do pisania wygląda następująco:

A Ty masz jakiś pomysł gdzie można zastosować efekt pojawiającego się tekstu?