Анимация печати текста

169

14 апреля 2017, 21:56

У меня есть тег DIV с текстом внутри. Можно ли изменить текстовое содержимое в цикле с помощью печатающего эффекта, где он выводится, а затем идет назад, удаляя буквы и начиная все заново с нового текста? Это возможно с jquery?

Перевод вопроса: typing animated text @Erik

Answer 1

Довольно простое решение:

var $typer = $('.typer'), 
    txt = $typer.data("text"), 
    tot = txt.length, 
    ch  = 0; 
 
(function typeIt() {    
  if(ch > tot) return; 
  $typer.text( txt.substring(0, ch++) ); 
  setTimeout(typeIt, ~~(Math.random()*(300-60+1)+60)); 
}());

/* PULSATING CARET */ 
.typer:after { 
  content:""; 
  display: inline-block; 
  vertical-align: middle; 
  width:1px; 
  height:1em; 
  background: #000; 
  animation: caretPulsate 1s linear infinite;  
  -webkit-animation: caretPulsate 1s linear infinite;  
} 
@keyframes caretPulsate { 
  0%   {opacity:1;} 
  50%  {opacity:1;} 
  60%  {opacity:0;} 
  100% {opacity:0;} 
} 
@-webkit-keyframes caretPulsate { 
  0%   {opacity:1;} 
  50%  {opacity:1;} 
  60%  {opacity:0;} 
  100% {opacity:0;} 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<span class="typer" data-text="Hi! My name is Al. I will guide you trough the Setup process."></span>

Таким образом, в основном jQuery получает data-text вашего элемента, вставляет символ за символом, а пульсирующая черточка ("caretPulsate") - это нечто анимированное при помощи CSS3 :after элемента SPAN.

Перевод ответа: typing animated text @Roko C. Buljan