TypeMe.js

TypeMe.js is a super simple type writer effect using web components. Look at this simple demo to see it in action.

• Installation
• Usage
• Styling
• Licence

Installation

⬆️ Top

Using a CDN

<script src="https://unpkg.com/typemejs@latest/dist/typeme.min.js" async></script>

Import with yarn or npm

npm install typemejs --save

Usage

⬆️ Top

Using this library is simple. Anywhere in your code call this HTML tag <type-me></type-me>. Don't forget to look at the simple demo.

Options

This plugin is configured with data attributes.

| Attribute data- | Default | Description | |-------------------|---------|-------------| | words | shorts, on, words | Words to be typed separated by a comma | | duration | 250 | Duration in ms between each characters | | pause | 1000 | Pause in ms between words | | shuffle | - | Shuffle words | | cursor-speed | 250 | Cursor speed in ms |

This is an example with all options:

<type-me data-words="one, two, three" 
         data-duration="125" 
         data-pause="1000"
         data-cursor-speed="300"
         data-shuffle></type-me>

Styling

This is a custom web element so you can bring your own CSS. You should know that the element has some CSS classes:

• .typeme for the wrapper
• .typeme-text for the words
• .typeme-cursor for the cusor

Licence

⬆️ Top

MIT