Typewriter and setting duration time

Question

I want to a typewriter effect in HTML/JavaScript/jQuery, for example this one, but I need to specify the duration total of the animation. For example if I set 10 seconds and the string is "dog" the animation will be very slow. Is this possible? Thanks.

Please read [ask]. Key phrases: "Search, and research" and "Explain ... any difficulties that have prevented you from solving it yourself". — Heretic Monkey, Jan 13 '17 at 19:50

score 1 · Answer 1 · answered Jan 13 '17 at 19:49

1

You could modify that existing plugin to add a new function that accepts a param for totalDelay, and then uses the existing typeString function with delay = totalDelay / str.length.

answered Jan 13 '17 at 19:49

Luke

18,811
16
99
115

Thank you for your help! – FeKuLa Jan 13 '17 at 20:08

score 1 · Accepted Answer · edited May 23 '17 at 11:52

I'm gonna use the same functions as in this one.

It's really simple.

On line typeString($tar, settings.text[idx], 0, settings.delay, function () { and on line deleteString($tar, settings.delay, function () { change settings.delay for (settings.delay / settings.text[idx].length) then when calling the construction function pass the delay (in ms) option with the time you want. e.g:

    $('#target').teletype({
      delay: 10000,
      text: [
        'dog',
        'Lorem ipsum dolor sit amet, consetetur sadipscing elitr,',
        'sed diam nonumy eirmod tempor invidunt ut labore et dolore',
        'magna aliquyam erat, sed diam voluptua. At vero eos et',
        'accusam et justo duo dolores et ea rebum. Stet clita kasd',
        'gubergren, no sea takimata sanctus est Lorem ipsum dolor         sit',
        'amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,',
        'sed diam nonumy eirmod tempor invidunt ut labore et dolore',
        'magna aliquyam erat, sed diam voluptua. At vero eos et         accusam',
        'et justo duo dolores et ea rebum. Stet clita kasd gubergren,',
        'no sea takimata sanctus est Lorem ipsum dolor sit amet.'
      ]
    });`

Typewriter and setting duration time

2 Answers2