Brief-by-Brief text Aussehen, die animation mit CSS

Ich habe eine <div> mit text.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ich würde gerne den text in diesem <div> erscheint auf der Seite ein Zeichen zu einem Zeitpunkt:

L 

Lo 

Lor 

... und so weiter, bis der gesamte text sichtbar ist

Akzeptable alternative: machen, dass ein Wort in einer Zeit, vermeiden Sie Probleme mit HTML-entities und jumpy Worte, durch weiche Silbentrennung.

Wenn der Benutzer klickt auf den <div> sollte es Abbrechen, die animation und die Anzeige der vollständige text sofort.

Kurz: ich möchte, zu imitieren, eine animation, die Häufig in der japanischen-Stil-adventure-Spiele. (Ich denke, dass dies wird manchmal als eine Schreibmaschine oder teletype-Effekt.) Hier ist ein gutes Beispiel:

http://www.youtube.com/watch?feature=player_detailpage&v=SasgN0lim7M#t=418

Natürlich kann ich ein Skript für die animation mit JavaScript — nur einen timer einrichten und anfügen von Buchstaben (oder Worte) one-by-one.

Aber ist es möglich, das zu tun, was ich brauche mit CSS in den modernen Browsern? (Natürlich bräuchte ich mindestens ändern-element-Klasse in der onclick mit JS, aber das ist OK.)

Update: Zu klären, auf Zeichen vs. Buchstaben und Probleme mit HTML-entities:

Mein text ist übersät mit HTML:

Lo&shy;rem <i>ip&shy;sum</i>.

Naive Ansatz mit dem anfügen von text an das innerHTML Charakter-by-Charakter nicht funktionieren würde:

L 

Lo 

Lo& 

...Doh!
Ich denke, der beste Ansatz ist, zu tun, was Sie bereits vorgeschlagen - JS mit timer und Anhängen von Buchstaben
Gut, eine Sache ist, der browser weiß besser über das, was ein Brief ist und was nicht als JS-code würde ich schreiben.
Tun Sie einfach jeden Charakter eher als einen Brief, ich denke, das ist eine normale Erfahrung
Nein, ein character-by-character-animation ist nicht möglich, mit CSS. Sie können nur animieren das umschließende Rechteck des Textes zu wachsen, aber das nicht mit einer Schreibmaschinen Effekt.
Wenn Sie wollen, dass es geschieht über css dann warum Sie tagged javascript?

InformationsquelleAutor Alexander Gladysh | 2013-11-04

  1. 6

    Leider kann man nicht das auch mit CSS machen, so haben Sie, um wieder zu einer reinen JS-Ansatz.

    Ihre Kommentare erklärt haben, Sie verlangen, dass Ihr text enthalten einige HTML-markup so würde ich vorschlagen, eine Wort-für-Wort-animation wird der einfachste Weg, damit umzugehen. So etwas wie dieses:

    var timer, fullText, currentOffset, onComplete, wordSet;

function Speak(person, text, callback) {
    $("#name").html(person);
    fullText = text;
    wordSet = text.split(" ");
    currentOffset = 0;
    onComplete = callback;
    timer = setInterval(onTick, 300);
}

function onTick() {
    currentOffset++;
    if (currentOffset == wordSet.length) {
        complete();
        return;
    }
    var text = "";
    for(var i = 0; i < currentOffset; i++){
     text += wordSet[i] + " ";   
    }
    text.trim();
    $("#message").html(text);
}

function complete() {
    clearInterval(timer);
    timer = null;
    $("#message").html(fullText);
    if (onComplete) onComplete();
}

$(".box").click(function () {
    complete();
});

Speak("Simon",
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",

function () {
    setTimeout(function () {
        Speak("Javascript", "Simon has finished speaking!");
    }, 2000);
});

    Hier ist ein funktionierendes Beispiel

    HINWEIS: Dieser code kann wahrscheinlich erheblich re-einkalkuliert werden effizienter und prägnant, aber es soll zeigen, das Konzept in vollem Umfang.

    Ich auch erstellt einen letter-by-letter Beispiel. Obwohl es nicht die Unterstützung, die Sie html-markup muss, es sieht schöner, also vielleicht können Sie es anpassen, um die Arbeit für Sie.

    InformationsquelleAutor musefan

  2. 8

    Können Sie erreichen dies mit ein bisschen jQuery.

    Check out my fiddle: http://jsfiddle.net/kA8G8/7/

    HTML

    <p class="typewriter">Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>

    JS

    var text = $('.typewriter').text();

var length = text.length;
var timeOut;
var character = 0;


(function typeWriter() { 
    timeOut = setTimeout(function() {
        character++;
        var type = text.substring(0, character);
        $('.typewriter').text(type);
        typeWriter();

        if (character == length) {
            clearTimeout(timeOut);
        }

    }, 150);
}());
    Würde nicht funktionieren, für text mit HTML-entities. Ich habe das update Frage weiter zu klären.

    InformationsquelleAutor Charles Ingalls

  3. 1

    Es ist eine Reine CSS-trick, dies zu tun.

    Verwenden Sie eine Maske-element, noch ein pseudo-element p:before oder p:after mit einem höheren z-index als deine text-element. Geben Sie die gleiche Farbe wie der text, der hintergrund und die Höhe einer Zeile. Legen Sie Sie mit der absoluten position nur über dem text.

    Dann haben Sie nur animieren es zu machen, bewegen Sie es nach rechts, entlarvenden Brief.
    Es ist nur ein workaround, denn wenn Sie haben einen komplexen hintergrund unter dem text, wie ein Bild, dann wird dieser trick ist schwer zu reproduzieren, da haben Sie, um die Karte hintergrund-Bild auf der Maskierung element.

    Nützlicher trick, aber würde nur funktionieren, wenn Sie garantieren könnten, dass der text auf einer Zeile.

    InformationsquelleAutor user2451013

Schreibe einen Kommentar