如何使用typed.js

时间:2015-05-21 15:20:51

标签: javascript html

我正在使用typed.js。我正在看一个简单的脚本,它可以动画文本来模拟某人输入它。 在剧本中,我看到 typeSpeed 30 我想让动画以20-30之间的随机速度书写,甚至包括动画打字期间的暂停。 有没有办法随机化?

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

1 个答案:

答案 0 :(得分:2)

你可以遍历字符串的每个字符串,并在每个字母上使用带有随机速度的typed()并将结果附加到你的html元素

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

使用setTimout()而不是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);
}