jquery - divi

escribiendo texto animado

Question

Tengo una etiqueta DIV con texto dentro. ¿Es posible cambiar el contenido del texto en un bucle con un efecto de tipeo, donde se escribe, luego se vuelve hacia atrás eliminando las letras y comenzando de nuevo con un nuevo texto? ¿Es esto posible con jquery?

Answer 1

Solo un enfoque simple:

$("[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>

Así que, básicamente, jQuery obtiene el data-text de data-text de tu elemento, inserta carácter por carácter, y el "cursor" pulsante no es nada por un CSS3 animado :after elemento de ese SPAN.

Ver también: Generar un número aleatorio entre dos números en JavaScript

Answer 2

El método de texto de Jquery () le permite configurar el texto de un elemento.

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

Podrías usar esto para animar los contenidos llamando a esto en un bucle, dándole los contenidos que te gustaría ver en cada fotograma.

var frames = [''t_'', ''ty_'', ''typ_'', ''type_'']

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

He hecho cosas más complicadas dividiendo los elementos de texto y manipulando los personajes, pero creo que en tu caso sería exagerado.