Skip to content

vuksamardzic/autotyped.js

Repository files navigation

autotyped.js

autotyped.js is a library that types any string.

npm i autotyped.js

Demo

Includes

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>

Usage

<h1 class="at-init">Text to be autotyped!</h1>
<script>
    const autotyped = new Autotyped();
    autotyped.init();
</script>

Settings

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.

Example

<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>

License

Licensed under the MIT license.

Made with ❤️ by Vuk Samardžić.