How to use custom input speed animation using typed.js

I am using typed.js. I am considering a simple script that allows you to animate text to mimic someone typing it. In the script, I see typeSpeed ​​30 . I would like to record an animation at a random speed between 20-30 or even include pauses during animated typing. Is there any way to randomize this?

$(function(){

    $("#typed").typed({
        strings: ["The text to be animated goes here"],
        typeSpeed: 30, 
        backDelay: 500,
        loop: false,
        loopCount: false,
     });
});


<center> <span id="typed"></span></center>
+4
source share
1 answer

You can scroll through each char of your line and use typped () at random speed for each letter and add the result to the html element

var myString = "The text to be animated goes here";
var max = 2500; //max typeSpeed you want
var min = 100;  //min typeSpeed you want

for (i = 0; i < myString.length; i++) {
    $("#typed").append().typed({ //here you have to test to find how to append
        strings: [myString[i]],
        typeSpeed: Math.floor(Math.random() * (max - min)) + min, 
        backDelay: 500,
        loop: false,
        loopCount: false,
     });
}

Working solution with setTimout () instead of typed ()

var myString = "The text to be animated goes here";
var max = 200; // arbitrary value to be tested
var min = 0;   

function doSetTimeout(character, delay) {
    setTimeout(function() {
        $("#typed").append(character); 
    }, delay);
}

for (var i = 0; i < myString.length; i++) {
    var delay = Math.floor(Math.random() * (max - min)) + min + (i * max);  //to keep the letter in good order
    doSetTimeout(myString[i], delay);
}
+2
source

Source: https://habr.com/ru/post/1589243/


All Articles