Ввод анимированного текста

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

Ответ 1

Просто простой подход:

$("[data-typer]").attr("data-typer", function(i, txt) {

  var $typer = $(this),
    tot = txt.length,
    pauseMax = 300,
    pauseMin = 60,
    ch = 0;

  (function typeIt() {
    if (ch > tot) return;
    $typer.text(txt.substring(0, ch++));
    setTimeout(typeIt, ~~(Math.random() * (pauseMax - pauseMin + 1) + pauseMin));
  }());

});

/* PULSATING CARET */
[data-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;}
}

<span data-typer="Hi! My name is Al. I will guide you trough the Setup process."></span>
<h3 data-typer="This is another typing animated text"></h3>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Ответ 2

Метод jquery text() позволяет вам установить текст элемента.

http://api.jquery.com/text/

Вы могли бы использовать это, чтобы анимировать содержимое, вызвав это в цикле, указав ему содержимое, которое вы хотели бы видеть в каждом кадре.

var frames = ['t_', 'ty_', 'typ_', 'type _']

// loop over frames ... inner part reads frame and prints it
// use setInterval, etc.
$('#my-div').text( frames[i] );

Я делал более сложные вещи, разбивая текстовые элементы и манипулируя символами, но я думаю, что в вашем случае это будет излишним.