wake-up-neo.net

Zeigen Sie Text Buchstabe für Buchstabe

Was ist die eleganteste Art, einen HTML-Text Buchstabe für Buchstabe (wie Videospielbeschriftungen) mithilfe von CSS und JavaScript anzuzeigen?

Ich bin mir sicher, dass man ihn mit einem Brute-Force-Ansatz lösen kann (zum Beispiel, indem man die Zeichen aufteilt und sie mit jQuery.append() nacheinander druckt), aber ich hoffe, es gibt CSS3 (Pseudo-Elemente?) Oder JQuery-Magie das eleganter.

Zusätzliche Punkte, wenn die Lösung inneren HTML-Inhalt berücksichtigt.

24
hpique

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

Anrufen mit:

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

Wenn eine glatte Enthüllung sinnvoll ist, sollte dies meiner Meinung nach ziemlich unkompliziert sein. Nicht getestet, aber so stelle ich mir vor, dass 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 eine Geige. Ein kleiner Codefehler, den ich behoben habe. Sieht mir gut aus!

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

12
mrtsherman

Sie sollten wirklich nur append oder zeigen/verbergen.

Wenn Sie jedoch aus irgendeinem Grund Ihren Text nicht ändern möchten, können Sie diesen übermäßig komplizierten Code verwenden:

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 die Geige: http://jsfiddle.net/dDGVH/236/

Aber im Ernst, benutzen Sie das nicht ...

3
Joseph Silber

Vanille-Javascript 100%, strenger Modus, unauffälliges 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);
3
BEAGM

Ich habe dafür ein kleines Jquery-Plugin gemacht. Zuerst müssen Sie sicherstellen, dass der Text sichtbar ist, wenn Javascript deaktiviert ist. Andernfalls wird der Text Buchstabe für Buchstabe erneut angezeigt.

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

Die Verwendung wird genauso einfach sein: 

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

Als ich das tat, stieß ich auf das Problem eines Wortes, das vom Ende einer Zeile zum Betteln der nächsten sprang, als die Buchstaben sich anscheinend um diese Seiten herum bewegten. Die anderen sichtbaren Buchstaben werden einfach nacheinander aus dem unsichtbaren Bereich in den sichtbaren Bereich verschoben. Hier ist eine Geige .

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)
2
hobberwickey

Machen Sie Ihren Code eleganter, indem Sie Versprechen für jede Iteration vorbereiten, und führen Sie sie als zweiten Schritt aus, in dem Sie DOM-Logik einfügen können.

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>

1
Abdennour TOUMI

Vanilla JavaScript-Version von @ armen.shimoons Antwort:

document.addEventListener('DOMContentLoaded', function() {

    showText("#msg", "Hello, World!", 0, 100);

});

let showText = function (target, message, index, interval) {
    if (index < message.length) {
        document.querySelector(target).innerHTML =
            document.querySelector(target).innerHTML + message[index++];
        setTimeout(function () { showText(target, message, index, interval); }, interval);
    }
}
<div id="msg"></div> 
<span id="text_target"></span>
1
Chuck Le Butt

Dies basiert auf 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 ++] hat auf meiner Jquery-Webseite nicht funktioniert - ich musste es in substr ändern. Auch mein ursprünglicher Text verwendet HTML und der eingegebene Text verwendet HTML-Formatierung (br, b usw.). Ich habe auch die Funktion angehalten, wenn das Ziel ausgeblendet wurde.

1
Luke Wenke

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

})();

sie können diesen Code verbessern, indem Sie ihn so ändern, dass Sie nur einmal das el erhalten, weil das DOM einige Ressourcen benötigt. 

0
JDoe

Sie müssen jeden Buchstaben in das span-Tag einschließen, da anonyme HTML-Elemente nicht formatiert werden können. Dann enthüllen Sie jeweils eine Zeitspanne. Dies vermeidet einige innere Text/innerHTML-Probleme (kein DOM-Reflow?), Kann jedoch in Ihrem Fall übertrieben sein.

0
Mikko Ohtamaa

es gibt eine gute Antwort, wie es geht hier : Dies ist eine Möglichkeit, mit der Sie jeden Buchstaben mit jeder verfügbaren .animate () -Eigenschaft bearbeiten können, nicht mit Hacks wie dem Abdecken von s usw.

0
David Genger

Ich habe versucht, das gleiche Problem zu lösen, und ich habe diese Lösung gefunden, die scheinbar funktioniert.

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

Dafür gibt es jetzt ein paar Bibliotheken. Es gibt TypeItJs und TypedJS . Beide erlauben es, dass HTML in der Sache ist, die Sie eingeben, sowie zahlreiche andere Methoden, die zur Animation von Typewriter-Effekten beitragen.

0
Ryan Schaefer

Die Antwort, die ich eingeben werde, ist die Antwort Text Buchstabe für Buchstabe anzeigen , aber ich habe einige Änderungen daran vorgenommen

HTML

<h1>
    <span id="msg"></span>
</h1>

Javacript

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

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

CSS

#msg {
    color: #6d67c6;
    font-family: sans-serif;
    font-size: 30px;
    font-weight: bold;
}
0
gms