T-Writer.js is a native typewriter-effect library, designed to be:
|
Below are a few demos, accompanied by the code you need to make it happen. These demos do not cover the full range of functionality built in. For a complete list of methods, please see the documentation on GitHub.
|
const writer = new Typewriter(target, { loop: true, typeColor: 'blue' }) writer .type('A simple syntax makes it easy.') .rest(500) .start()
|
const writer = new Typewriter(target, { loop: true, typeSpeed: 80, deleteSpeed: 80, typeColor: 'red' }) writer .type('You can type') .rest(500) .changeOps({ deleteSpeed: 80 }) .remove(4) .type('edit') .rest(500) .remove(4) .type('synchronize callbacks') .rest(500) .changeOps({ deleteSpeed: 20 }) .remove(21) .type('change options on the go') .rest(500) .clear() .start()
|
const writer = new Typewriter(target, { loop: true, typeColor: 'red' }) writer .strings( 400, "Set many strings", "In just one call", "Using the 'strings' method" ) .start()
|
const writer1 = new Typewriter(target1, { typeSpeed: 60 }) const writer2 = new Typewriter(target2, { typeSpeed: 60 }) writer1 .type('Combo typewriters to') .removeCursor() .then(writer2.start.bind(writer2)) .start() writer2 .type("create complex effects") .rest(500) .clear() .changeTypeColor('red') .type("defy user expectations") .rest(500) .clear() .changeTypeColor('blue') .type("generate a custom loop") .rest(500) .clear() .changeTypeColor('black') .then(writer1.start.bind(writer1))