Typing effect: Word per Word

Question

I've been figuring out how to have a typing effect that is word per word instead of letter per letter. So far, all links I've searched are offering letter per letter typewriter effect.

https://macarthur.me/typeit/ https://github.com/mattboldt/typed.js/

Is this possible to achieve? Or have you done something similar?

The question does not have a specific programming related problem for us to solve, hence it's off topic in stackoverflow. Please review [ask] — Esko, Jul 06 '17 at 08:57
@Esko hm... i think the question was pretty clear, though definitely poorly phrased :/ — oldboy, Jul 06 '17 at 08:59
Possible duplicate of [Typewriter-Effect for HTML with JavaScript](https://stackoverflow.com/questions/22180457/typewriter-effect-for-html-with-javascript) — Rory McCrossan, Jul 06 '17 at 09:01
Possible duplicate of [Typewriter-Effect for HTML with JavaScript](https://stackoverflow.com/questions/22180457/typewriter-effect-for-html-with-javascript) — evolutionxbox, Jul 06 '17 at 09:03

score 3 · Accepted Answer · edited Jul 06 '17 at 12:35

3

This is pretty easy. Just register an interval, split your text, reverse the array and pop the last item. The one you append to the text-container then. Done.

JS

var myText = "Some text you want to be typed automagically..";
var myWords = myText.split(" ").reverse();

var ntrvl = setInterval(function() {
  addNextWord();
}, 150);

function addNextWord() {
  var nextWord = myWords.pop();
  if(nextWord !== undefined) {
      var textNow = $(".write-here").text() + " " + nextWord;
      $(".write-here").text(textNow);
  }
}

What do you think of this?

JSfiddle

edited Jul 06 '17 at 12:35

Sagar V

12,158
7
41
68

answered Jul 06 '17 at 09:05

Manticore

1,284
16
38

1

Thank you so much! :) They say it's not a programing specific to be solved... yet you still helped! I really appreciate it. :) – Woppi Jul 06 '17 at 09:12
@Woppi you even improved the code, that's nice. cheers! – Manticore Jul 06 '17 at 13:18

oldboy · Answer 2 · 2017-07-06T09:25:26.680

1

create an array with whichever words you want to print one at a time.

const sentence = 'this sentence will be displayed one word at a time';
var arrayOfWords = sentence.split(' ');

for (var i = sentence.length - 1; i >= 0; i--) {
    setTimeout(function(){
        console.log(sentence[i]); // or display another way
    }, 400) // set this to your desired interval
}

edited Jul 06 '17 at 09:25

answered Jul 06 '17 at 08:58

oldboy

5,729
6
38
86

1

You could also create a string and let the function split it.. – Patrick Mlr Jul 06 '17 at 09:10
@PatrickMlr yeah, you're right. using the split method would make it a lot more convenient instead of breaking apart the input manually – oldboy Jul 06 '17 at 09:21

Typing effect: Word per Word

2 Answers2