Demo 1- Default Writeout

By default, the plugin will take the text inputted into the message value and write it out letter by letter into the target elemet. After each word, the element will be cleared of all text.

Output:

Javascript Code:

            $('#text-writeout-1').textWriteout({
              messages: ["Hello ", "World! "],
            });
          

Demo 2- Modify The Delete Process

The plugin can also be set to clear it's element after each word or not clear the element at all by changing the deleteWord and DeleteWords properties.

Output:

Javascript Code:

            $('#text-writeout-2-1').textWriteout({
              messages: ["5", "4", "3", "2", "1", "0"],
              deleteWord: true,
              deleteWords: true,
            });
          

Output:

Javascript Code:

            $('#text-writeout-2-2').textWriteout({
              messages: ["5", "4", "3", "2", "1", "0"],
              deleteWord: false,
              deleteWords: false,
            });
          

Demo 3- Preventing Looping Animation

There is also the option to stop the loop by modifying the loop property.

Output:

Javascript Code:

            $('#text-writeout-3').textWriteout({
              messages: ["ready, ", "get set, ", "go!"],
              deleteWord: true,
              deleteWords: false,
              deleteLastWord: false,
              loop: false,
            });
          

Demo 4- Affect The Speed

In addition, the speed of each process can be adjusted with the letterWait, wordWait and deleteWait.

Output:

Javascript Code:

            $('#text-writeout-4-1').textWriteout({
              messages: ["A ", "need ", "for ", "speed!"],
              letterWait: 50,
            });
          

Output:

Javascript Code:

            $('#text-writeout-4-2').textWriteout({
              messages: ["A ", "need ", "for ", "speed!"],
              wordWait: 200,
            });
          

Output:

Javascript Code:

            $('#text-writeout-4-3').textWriteout({
              messages: ["A ", "need ", "for ", "speed!"],
              deleteWait: 200,
            });
          

Demo 5- Additional Effects

There is also bonus effects that can be added to the text writeout to create different effects like creating a text cursor or selecting text before it is deleted.

Output:

Javascript Code:

            $('#text-writeout-5-1').textWriteout({
              messages: ["First Title", "Second Title", "Third Title"],
              deleteWord: true,
              deleteWords: false,
              deleteLastWord: false,
              loop: false,
              wordCursor: true,
              cursorBlink: true,
            });
          

CSS Code:

            #demo .word-cursor{
              color: #8758bc;
            }
          

Output:

Javascript Code:

            $('#text-writeout-5-2').textWriteout({
              messages: ["First Title", "Second Title", "Third Title"],
              deleteWord: true,
              deleteWords: false,
              deleteLastWord: false,
              loop: false,
              selectWord: true,
            });
          

CSS Code:

            #demo .word-selected{
              background-color: #8758bc;
              padding: 2px;
              color: #fff;
            }