javascript - poner - texto animado html

Mostrar texto letra por letra

Question

¿Cuál es la forma más elegante de mostrar un texto html letra por letra (como títulos de videojuegos) usando CSS y JavaScript?

Aunque estoy seguro de que se puede resolver con un enfoque de fuerza bruta (por ejemplo, dividir los caracteres e imprimirlos uno por uno usando jQuery.append() ), espero que haya algo de CSS3 (¿pseudoelementos?) O JQuery magia para hacer esto de manera más elegante.

Puntos extra si la solución considera contenido HTML interno.

Answer 1

Cuando hice esto, me encontré con el problema de una palabra que salta desde el final de una línea hasta el comienzo de la siguiente, ya que las letras parecían rodear esto, y yo solía hacerlo de lado a lado, uno de los cuales era transparente. las otras letras visibles y simplemente movidas una por una desde el tramo invisible al visible. Aquí hay un fiddle .

HTML

<div class=''wrapper''>
  <span class=''visible''></span><span class=''invisible''></span>
</div>

CSS

.visible {
  color: black;
} 

.invisible {
  color: transparent;
}

JS

var text = "Whatever you want your text to be here",
    soFar = "";

var visible = document.querySelector(".visible"),
    invisible = document.querySelector(".invisible");

invisible.innerHTML = text;
var t = setInterval(function(){
  soFar += text.substr(0, 1),
  text = text.substr(1);

  visible.innerHTML = soFar;
  invisible.innerHTML = text;

  if (text.length === 0) clearInterval(t);
}, 100)

Answer 2

Debe envolver cada letra en la etiqueta span, porque los elementos html anónimos no se pueden diseñar. Luego revele un tramo a la vez. Esto evita algunos problemas internos de HTML / innerHTML (no reflujo DOM?) Pero puede ser excesivo en su caso.

Answer 3

Estaba tratando de resolver el mismo problema y se me ocurrió esta solución que parece funcionar.

HTML

<div id=''target''></div>

jQuery

$(function() {
  var message = ''Hello world'';
  var index = 0;

  function displayLetter() {
    if (index < message.length) {
      $(''#target'').append(message[index++]);
    }
    else{
      clearInterval(repeat);
    }
  }
  var repeat = setInterval(displayLetter, 100);
});

Answer 4

Esto se basa en armen.shimoon:

var showText = function (target, message, index, interval) {    
    if (index <= message.length && $(target).is('':visible'')) { 
        $(target).html(message.substr(0, index++)); 
        setTimeout(function () { showText(target, message, index, interval); }, interval); 
    } 
}

message [index ++] no funcionaba en mi página web de jquery - Tuve que cambiarlo a substr. También mi texto original usa HTML y el texto que se escribe utiliza el formato HTML (br, b, etc.). También tengo la función parando si el objetivo ha estado oculto.

Answer 5

HTML

<div id="msg"/>

Javascript

var showText = function (target, message, index, interval) {   
  if (index < message.length) {
    $(target).append(message[index++]);
    setTimeout(function () { showText(target, message, index, interval); }, interval);
  }
}

Llamar con:

$(function () {
  showText("#msg", "Hello, World!", 0, 500);   
});

Answer 6

Haga su código más elegante preparando promesas para cada iteración, luego ejecútelas como el segundo paso donde puede inyectar la lógica de DOM.

const message = ''Solution using Promises'';

const typingPromises = (message, timeout) =>
  [...message].map(
    (ch, i) =>
      new Promise(resolve => {
        setTimeout(() => {
          resolve(message.substring(0, i + 1));
        }, timeout * i);
      })
  );

typingPromises(message, 140).forEach(promise => {
  promise.then(portion => {
    document.querySelector(''p'').innerHTML = portion;
  });
});

<div ><p></p></div>

Answer 7

Hay un par de bibliotecas para esto ahora. Hay TypeItJs y TypedJS ambos permiten que html esté en lo que está escribiendo, así como muchos otros métodos que ayudan a animar los efectos de Typewriter.

Answer 8

Hice un pequeño complemento jquery para eso. Primero debe asegurarse de que el texto esté visible si javascript está deshabilitado, y si no, vuelva a mostrar el texto letra por letra.

$.fn.retype = function(delay) {
    var el = this,
        t = el.text(),
        c = t.split(''''),
        l = c.length,
        i = 0;
    delay = delay || 100;
    el.empty();
    var interval = setInterval(function(){
        if(i < l) el.text(el.text() + c[i++]); 
        else clearInterval(interval);
    }, delay);
};

El uso será tan fácil como esto:

$(''h1'').retype();

Answer 9

Javascript 100% vainilla, modo estricto, html discreto,

function printLetterByLetter(destination, message, speed){
    var i = 0;
    var interval = setInterval(function(){
        document.getElementById(destination).innerHTML += message.charAt(i);
        i++;
        if (i > message.length){
            clearInterval(interval);
        }
    }, speed);
}

printLetterByLetter("someElement", "Hello world, bonjour le monde.", 100);

Answer 10

Realmente deberías append , mostrar / ocultar.

Sin embargo, si por alguna extraña razón no quiere alterar su texto, puede usar este pedazo de código demasiado complicado para nada justificado:

HTML:

<p>I''m moving slowly...<span class="cover"></span></p>

CSS:

p {
    font-family: monospace;
    float: left;
    padding: 0;
    position: relative;
}
.cover {
    height: 100%;
    width: 100%;
    background: #fff;
    position: absolute;
    top: 0;
    right: 0;
}

jQuery:

var $p = $(''p''),
    $cover = $(''.cover''),
    width = $p.width(),
    decrement = width / $p.text().length;

function addChar()
{        
    $cover.css(''width'', ''-='' + decrement);

    if ( parseInt( $cover.css(''width'') ) < width )
    {
        setTimeout(addChar, 300);
    }
}

addChar();

Y finalmente, aquí está el violín: http://jsfiddle.net/dDGVH/236/

Pero, en serio, no uses esto ...

Answer 11

Si una revelación suave es razonable, entonces creo que esto debería ser bastante sencillo. No probado, pero así es como me imagino que funcionaría

html

<div id="text"><span>The intergalactic space agency</span></div>

css

div#text { width: 0px; height: 2em; white-space: nowrap; overflow: hidden;  }

jQuery

var spanWidth = $(''#test span'').width();
$(''#text'').animate( { width: spanWidth }, 1000 );

De acuerdo, no pude resistir e hice un violín. Un pequeño error de código que arreglé. ¡Me parece bien!

http://jsfiddle.net/mrtsherman/6qQrN/1/

Answer 12

Vanillla

(function () {

var showText = function(target, msg, index, interval){

  var el = document.getElementById(target);

  if(index < msg.length){
    el.innerHTML = el.innerHTML + msg.charAt(index);
    index = index + 1;
    setTimeout(function(){
      showText(target,msg,index,interval);
    },interval);
  }

};


showText("id", "Hello, World!", 0, 50);   

})();

puedes mejorar este código cambiándolo para que solo lo obtengas todo el tiempo, ya que requiere un poco de recursos para modificar el DOM.

Answer 13

hay una buena respuesta sobre cómo hacerlo here : esta es una forma de manipular cada letra con cualquier propiedad .animate () disponible, no con hacks como cubrir el texto con s, etc.