0.0.2 • Published 4 years ago

typemejs v0.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

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

⬆️ Top

Using a CDN

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

Import with yarn or npm

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-DefaultDescription
wordsshorts, on, wordsWords to be typed separated by a comma
duration250Duration in ms between each characters
pause1000Pause in ms between words
shuffle-Shuffle words
cursor-speed250Cursor 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