Quick start
Insert the code below into the <head> of your project<link rel="stylesheet" href="https://typingjs.vercel.app/css/plugin.css">Insert the code below at the end of <body> of your project
<script src="https://typingjs.vercel.app/js/plugin.js">HTML
This code will create a box with a text using the typewriter effect. Feel free to add more spans inside of it, if you need to show more than one phrase per box.<div class="typing-js">
<span data-text="Hello, I'm typing this text"></span>
</div>Javascript
Use the javascript code bellow to init TypingJS. You can personalize the values to get another variation of time, speed and toggle the loop.<script>
document.addEventListener('DOMContentLoaded', () => {
typingjs({
selector: '.typing-js',
typingTime: 40, // Interval between each character in milliseconds (ms)
sleepingTime: 2000, // Interval between each phrase in milliseconds (ms)
deletingTime: 25, // Interval between deleting of each character in milliseconds (ms)
typingLoop: true, // false: Keep the last phrase / true: After the last one, returns to the first
})
});
</script>