tiny-typewriter
v1.0.4
Published
tinyTypewriter.js is just a small (1kb) piece of vanilla javascript that generates a typewriter effect.
Downloads
401
Maintainers
cesarlevelReadme
tinyTypewriter.js
tinyTypewriter.js is just a small (1kb) piece of vanilla javascript that generates a typewriter effect.
How to use
CDN
<head>
<script src="https://unpkg.com/browse/tiny-typewriter@latest/dist/tinyTypewriter.min.js"></script>
</head>;
...
<h1>tiny<span id="typewritter">Your fallback text</span></h1>const typewritter = document.querySelector("#typewriter");
tinyTypewriter(typewritter, {
items: ['Size', 'Typewriter.js']
});NPM
npm install tiny-typewriterimport tinyTypewriter from 'tiny-typewriter';
const typewritter = document.querySelector("#typewriter");
tinyTypewriter(typewritter, {
items: ['Size', 'Typewriter.js']
});Options
| Option | Default | | :------------- | :----------: | | items | [] | | typeSpeed | 500 | | deleteSpeed | 50 | | delayBetweenItems | 2000 | | loop | true | | startDelay | 0 | | startsAtIndex | 0 | | cursorChar | "|" | | cursorCharBlinkSpeed | 500 | | cursorCharBlinkTransitionSpeed | 0.15 | | startOnView | true | | startOnViewOffset | 0 |
Example
tinyTypewriter(el, {
items: ['Size', 'Typewritter.js'],
typeSpeed: 100,
deleteSpeed: 50,
delayBetweenItems: 2000,
loop: true,
startDelay: 0,
startsAtIndex: 0,
cursor: true,
cursorChar: "|",
cursorCharBlinkSpeed: 500,
cursorCharBlinkTransitionSpeed: 0.15,
startOnView: true,
startOnViewOffset: 0,
});