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

#html #jquery #css #css3 #анимация

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

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

Ответы

Ответ 1

анимация печатающего эффекта для текста на css



* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.b-container {
  margin: 25px auto;  
  padding: 15px 25px;
  max-width: 400px;
  background: #222;
  color: #fff;
  border-radius: 3px;
}

.text-list,
.text-list li{
  overflow: hidden;
  line-height: 1.25;  
}
.text-list > li {
  white-space: nowrap;
  border-right: 1px solid;
  -webkit-animation: animT1 4s steps(30, end), animBlinkCaret 1s step-end 4s;
          animation: animT1 4s steps(30, end), animBlinkCaret 1s step-end 4s;
}
.text-list > li:nth-child(2) {
  -webkit-animation: animT2 4s steps(30, end), animBlinkCaret 1s step-end 4s;
          animation: animT2 4s steps(30, end), animBlinkCaret 1s step-end 4s;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
}

@-webkit-keyframes animT1 {
  from {
    width: 0;
  }
  to {
    width: 350px;
  }
}

@keyframes animT1 {
  from {
    width: 0;
  }
  to {
    width: 350px;
  }
}

@-webkit-keyframes animT2 {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

@keyframes animT2 {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

@-webkit-keyframes animBlinkCaret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: #fff;
  }
}

@keyframes animBlinkCaret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: #fff;
  }
}

  
  

    
Привет! Моё имя Al. Я проведу вас
    
через весь процесс установки приложения.
  
  
  
  



Ответ 2

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



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;}
}






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

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