javascript - Error in using Typed.js Typewriter effect -
i creating typing effect using html5 , css ,javascript,typed.js. code=
<!doctype html> <html> <head lang="en"> <meta charset="utf-8"> </head> <body> <p class ="typewirter_effect"></p> <script src="jquery-ui.min.js>"></script> //this downloaded jquery's website n pasted in same folder <script src="jquery.js"></script> //this downloaded jquery's website n pasted in same folder <script src="typed.min.js"></script> //this downloaded typed.js main website n pasted in same folder <script> $(function() { $("#typewirter_effect").typed({ strings: ["want learn coding ?", "want learn c++","java","python"], typespeed: 0, loop: true, backspeed: 30, showcursor: true, backdelay: 500, startdelay: 1000, contenttype: 'text', backspace: function(curstring, curstrpos) { settimeout(function () { // check string array position // on first string, delete 1 word // stopnum represents amount of chars // keep in current string. in case it's 3. if (curstring.arraypos == 20) { curstring.stopnum = 14; } //every other time, delete whole typed string else { self.stopnum = 14; } } ) } }); }); </script> </body> </html> 1) when run cursor appear in bottom cursor problem, want cursor right next ? mark @ end of line stays down.
2) want second sentence "want learn c++" not erased , c++ 2 erased , java appended .
i have read documentation .but nothing seems work out .help link of documentation==(https://github.com/mattboldt/typed.js/blob/master/readme.md)
1)
p tag paragraph, change p tag span tag , problem resolved.
<span class="typewirter_effect"></span> 2)
just add text before typewritter effect text:
want learn <span class="typewirter_effect"></span> and change strings to:
strings: ["coding?", "c++?", "java?", "python?"] demo: https://jsfiddle.net/brownsugar/cncm5w0u/
i use callback function start language typewriter , let loop.
first run main sentence .typewirter_effect, , when completed, run .lang.
html:
<span class="typewirter_effect"></span><span class="lang"></span> javascript:
$(function() { $('.typewirter_effect').typed({ strings: ['want learn coding?', 'want learn '], typespeed: 50, backdelay: 3000, callback: function(){ showlang(); // run element $('.typed-cursor').first().hide(); // hide first cursor } }); }); function showlang() { $('.lang').typed({ strings: ['c++', 'java', 'python'], typespeed: 50, backdelay: 2000, loop: true }); }
Comments
Post a Comment