Zeige den Text Buchstabe für Buchstabe

Was ist der eleganteste Weg zu zeigen, einen html-text Buchstabe für Buchstabe (wie videogame Untertitel), Verwendung von CSS und JavaScript?

Während ich bin sicher, dass sein können gelöst werden mit Hilfe eines brute-force-Ansatz (sagen, die Aufteilung der Zeichen und drucken Sie Sie mithilfe jQuery.append()), ich hoffe, es gibt einige CSS3 (pseudo-Elemente?) oder JQuery-magic, um dies zu tun mehr aus.

Extra-Punkte, wenn die Lösung der Auffassung, innere HTML-Inhalt.

InformationsquelleAutor der Frage hpique | 2011-09-01

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

Anruf mit:

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

InformationsquelleAutor der Antwort armen.shimoon

11

Wenn eine glatte offenbaren zumutbar ist, dann denke ich, das sollte ziemlich einfach sein. Ungetestet, aber dies ist, wie ich mir vorstellen das es funktionieren würde

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 );
```
Okay, ich konnte nicht widerstehen und machte ein Turnschuh. Ein kleiner code-Fehler, den ich behoben. Sieht gut aus für mich, obwohl!

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

InformationsquelleAutor der Antwort mrtsherman

Sollten Sie wirklich nur append oder ein - /ausblenden.

Jedoch, wenn aus irgendeinem Grund Sie nicht wollen, zu ändern, Ihren text, die Sie verwenden können, diese übermäßig kompliziert-für-keine-guten-Grund Stück code:

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();

Und schließlich ist hier das fiddle: http://jsfiddle.net/dDGVH/236/

Aber im ernst, glaube nicht, verwenden Sie diese...

InformationsquelleAutor der Antwort Joseph Silber

100% vanilla javascript strict-Modus, unaufdringlich, html,

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

InformationsquelleAutor der Antwort BEAGM

Als ich dies Tat lief ich in das problem, ein Wort, das springen vom Ende der einen Zeile zum betteln auf die nächste, wie es die Briefe erschienen, dies zu umgehen, ich verwendet, um Seite an Seite umfasst, von denen der text wurde transparent, die andere sichtbar und einfach verschoben Briefe aus dem unsichtbaren span-zu den sichtbaren. Hier ist ein fiddle.

HTML

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

CSS

.visible {
  color: black;
} 

.invisible {
  color: transparent;
}

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)

InformationsquelleAutor der Antwort hobberwickey

Machte ich eine kleine jquery-plugin. Zuerst müssen Sie sicherstellen, dass der text sichtbar sein, wenn javascript deaktiviert ist, und wenn nicht, wieder den text Buchstabe für Buchstabe.

$.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);
};

Nutzung genauso einfach wie diese:

$('h1').retype();

InformationsquelleAutor der Antwort Hazem_M

1

Diese basiert auf den armen.shimoon ist:
```
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); 
    } 
}
```
Meldung[index++] war nicht in meiner jquery-Webseite - ich hatte zu ändern, um substr. Auch meine original-text nutzt HTML und text, der eingegeben wird, verwendet die HTML-Formatierung (br, b, etc). Ich habe auch die Funktion zu stoppen, wenn das Ziel versteckt wurde.

InformationsquelleAutor der Antwort Luke Wenke
0

Müssen Sie wickeln Sie jeden Buchstaben in der span-tag, da anonymer html-Elemente können nicht formatiert werden. Dann zeigen eine Spanne an Zeit. Dies vermeidet einige innerText /innerHTML-Themen (kein DOM reflow?) aber kann zu viel des guten in deinem Fall.

InformationsquelleAutor der Antwort Mikko Ohtamaa

Vanille

(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);   

})();

könnte man verbessern auf diesen code zu ändern, sodass Sie nur die el einer Zeit aufgrund der Tatsache, dass es dauert ein bisschen Mittel zum ändern der DOM.

InformationsquelleAutor der Antwort JDoe

0

es ist eine gute Antwort, wie es zu tun hier:
dies ist eine Möglichkeit, die Sie Bearbeiten können jeden Buchstaben mit jedem .animieren () - Eigenschaft zur Verfügung, die nicht mit hacks wie z.B. die Bedeckung der text mit s etc.

InformationsquelleAutor der Antwort David Genger

Ich habe versucht, dieses problem zu lösen und ich kam mit dieser Lösung, die zu funktionieren scheint.

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

InformationsquelleAutor der Antwort athinats

0

Gibt es ein paar Bibliotheken, die für das jetzt. Es gibt TypeItJs und TypedJS beide erlauben für html zu sein, in der Sache, dass Sie die Eingabe, sowie zahlreiche andere Methoden, die Unterstützung bei der Schreibmaschine animieren Effekte.

InformationsquelleAutor der Antwort Ryan Schaefer

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.