Comment Style Typing Animation en Javascript

Question

Je me demandais s'il y avait un moyen de faire entrer le texte de saisie dans différentes tailles de police. J'ai joint un jsfiddle qui montre ce que j'ai fait jusqu'ici. Est-il possible d'attribuer une classe à chaque phrase?

Merci!

https://jsfiddle.net/te4fo7fh/embedded/result/

var tt_element = document.getElementById("tt_element"); 
 
var tt_text = "It would be great if this sentence came in 12pt fontsize.^with the typing effect being editable.^^And this one came in 30pt font size."; 
 
var tt_array = tt_text.split(""); 
 
var tt_timer; 
 
var tt_loop = true; 
 
var tt_speed = 70; 
 
var tt_delay = 3000; 
 
var tt_br = "^"; 
 

 
function typeMyText() { 
 
    if (tt_array.length > 0) { 
 
    if (tt_array[0] == tt_br) { 
 
     tt_element.innerHTML += "<br>"; 
 
     tt_array.shift(); 
 
    } else { 
 
     tt_element.innerHTML += tt_array.shift(); 
 
    } 
 
    } else { 
 
    clearTimeout(tt_timer); 
 
    if (tt_loop) { 
 
     setTimeout(clearMyText, tt_delay); 
 
    } 
 
    return false; 
 
    } 
 
    tt_timer = setTimeout(typeMyText, tt_speed); 
 
} 
 

 
typeMyText();

#tt_element { 
 
    padding-top: 20px; 
 
\t line-height:1.5em; 
 
    font-size: 12pt; 
 
    font-family: Georgia; 
 
}

<section class="editable" contenteditable="true"> 
 
    <p id="tt_element" class="blue"></p> 
 
</section>

Answer 1

Je mis à jour votre exemple.

Tout d'abord, vous tapez le fontSize souhaité dans votre chaîne comme vos pauses.

var tt_text = "It would be great if this sentence came in 12pt fontsize.^with the typing effect being editable.^^{30}And this one came in 30pt font size."; 

Après que vous mettez chaque ligne en une seule span.

var tt_line = document.createElement('span'); 
tt_element.appendChild(tt_line); 

Une fois que vous avez fait que vous avez encore besoin de reconnaître le changement fontSize:

if (tt_array[0] == '{') { 
    var index = 0; 
    var fontSize = ''; 
    tt_array.shift() // To skip { 
    // Loop to get the size between the {} 
    while (tt_array[index] !== '}') { 
     fontSize += tt_array[index]; 
     tt_array.shift() 
    } 
    tt_array.shift() // To skip } 
    tt_line.style.fontSize = fontSize+'px'; 
    } 

Voir le violon ici: https://jsfiddle.net/te4fo7fh/1/

Answer 2

Je pense que vous avez utiliser Typed.js Ce qui a beaucoup d'options pour jouer avec. Voici le lien pour que: Type.js

Voici quelques exemples de code avec ce js:

<script src="jquery.js"></script> 
<script src="typed.js"></script> 
<script> 
    $(function(){ 
     $(".element").typed({ 
     strings: ["First sentence.", "Second sentence."], 
     typeSpeed: 0 
     }); 
    }); 
</script> 
... 

<div class="element"></div> 

Ajouter ce pour le curseur clignotant animé.

.typed-cursor{ 
    opacity: 1; 
    -webkit-animation: blink 0.7s infinite; 
    -moz-animation: blink 0.7s infinite; 
    animation: blink 0.7s infinite; 
} 
@keyframes blink{ 
    0% { opacity:1; } 
    50% { opacity:0; } 
    100% { opacity:1; } 
} 
@-webkit-keyframes blink{ 
    0% { opacity:1; } 
    50% { opacity:0; } 
    100% { opacity:1; } 
} 
@-moz-keyframes blink{ 
    0% { opacity:1; } 
    50% { opacity:0; } 
    100% { opacity:1; } 
} 

Answer 3

Vous pouvez remplacer tt_text par un tableau d'objets, qui intégrer des informations de style (tt_text_with_style dans mon exemple).

var tt_element = document.getElementById("tt_element"); 
 
var tt_current_element; 
 
var tt_array = []; 
 
var tt_text_with_style = [ 
 
    {size: '12pt', lineHeight: '25pt', txt: 'It would be great if this sentence came in 12pt fontsize.^with the typing effect being editable.^^'}, 
 
    {size: '30pt', lineHeight: '35pt', txt: 'And this one came in 30pt font size.'}]; 
 
var tt_timer; 
 
var tt_loop = false; 
 
var tt_speed = 7; 
 
var tt_delay = 3000; 
 
var tt_br = "^"; 
 
var i = 0; 
 
var current_line 
 

 

 
function styleMyText() { 
 
    var style = 'font-size: ' + current_line.size + ';line-height: ' + current_line.lineHeight 
 
    tt_current_element = document.createElement('span') 
 
    tt_current_element.setAttribute('style', style) 
 
    tt_element.appendChild(tt_current_element) 
 
} 
 

 
function clearMyText() { 
 
    tt_element.innerHTML = '' 
 
    tt_array = [] 
 
    i = 0; 
 
    typeMyText() 
 
} 
 

 
function typeMyText() { 
 
    if (tt_array.length === 0) { 
 
    current_line = tt_text_with_style[i++] 
 
    if (!current_line) { 
 
     clearTimeout(tt_timer); 
 
     if (tt_loop) { 
 
     setTimeout(clearMyText, tt_delay); 
 
     } 
 
     return false 
 
    } 
 
    current_style = current_line.size 
 
    tt_array = current_line.txt.split('') 
 
    styleMyText() 
 
    } 
 
    
 
    if (tt_array[0] == tt_br) { 
 
    tt_current_element.innerHTML += "<br>"; 
 
    tt_array.shift(); 
 
    } else { 
 
    tt_current_element.innerHTML += tt_array.shift(); 
 
    } 
 

 
    tt_timer = setTimeout(typeMyText, tt_speed); 
 
} 
 

 

 

 
typeMyText();

#tt_element { 
 
    padding-top: 20px; 
 
    line-height:1.5em; 
 
    font-size: 12pt; 
 
    font-family: Georgia; 
 
} 
 

 
.blue ::selection { 
 
    background: red; 
 
}

<section class="editable" contenteditable="true"> 
 
    <p id="tt_element" class="blue"></p> 
 
</section>