autotyped.js is a library that types any string.
Just add a link to the css file in your <head>:
<link rel="stylesheet" type="text/css" href="{path}/lib/autotyped.css"/>Then, before your closing <body> tag add:
<script type="text/javascript" src="{path}/lib/autotyped.min.js"></script><h1 class="at-init">Text to be autotyped!</h1><script>
const autotyped = new Autotyped();
autotyped.init();
</script>| Option | Type | Default | Description |
|---|---|---|---|
| selector | string | '.at-init' | CSS selector. |
| animate | boolean | true | Choose whether you animate or not. |
| animation | string | 'bounce' | Choose which animation you use. Available 'bounce', 'rotate', 'rubber-band', 'pop-in', 'left-slide', 'right-slide', 'meteor-shower'. |
| speed | int | 200 | Autotype speed in ms. |
| text | string[] | [] | Text you feed to autotyped.js if you want custom text to type. |
<p class="at-init">Text to be autotyped!</p>
<script>
//we want it to go faster or slower than default (200)
const autotyped = new Autotyped();
autotyped.init({speed: 100});
</script><p class="at-init">Text to be autotyped!</p>
<script>
//we somehow don't want animations... weird.. but hey, your choice
const autotyped = new Autotyped();
autotyped.init({animate: false});
</script><p id="myElement">Text to be autotyped!</p>
<script>
//we want specific selector with custom speed and other animation
const autotyped = new Autotyped();
autotyped.init({speed: 250, animation: 'rotate', selector: '#myElement'});
</script><p class="at-init">Text to be autotyped!</p>
<script>
//We want custom text to type, not text inside element
const autotyped = new Autotyped();
autotyped.init({text: ['My custom text to type!']});
</script>Licensed under the MIT license.
Made with ❤️ by Vuk Samardžić.