pisanie tekstu animowanego

Question

Mam tag DIV z tekstem w środku. Czy możliwa jest zmiana treści tekstowej w pętli z efektem pisania, gdzie jest ona wypisywana, a następnie cofa usuwanie liter i rozpoczyna się od nowa z nowym tekstem? Czy to możliwe z jquery?

Answer 1

Wystarczy proste podejście:

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

Więc w zasadzie jQuery dostaje data-text swojego elementu, wstawia znak po znaku, a pulsujące "daszka" jest niczym przez CSS3 animowane :after element tego SPANU.

Zobacz także: Generate random number between two numbers in JavaScript

Answer 2

Metoda tekstowa Jquery() pozwala ustawić tekst elementu.

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

Użytkownik będzie mógł wykorzystać do animowania zawartość nazywając to w pętli, nadając jej zawartości, które chcesz zobaczyć w każdej ramce.

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

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

robiłem bardziej skomplikowane rzeczy poprzez rozdzielenie elementów tekstowych i manipulowania znaki, ale myślę, w twoim przypadku byłaby to przesada.