diff --git a/README.md b/README.md index d603fb7..87b17c7 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,125 @@ +![GitHub release](https://img.shields.io/github/release/MattMoony/10fingersJS.svg) ![GitHub last commit](https://img.shields.io/github/last-commit/MattMoony/10fingersJS.svg) ![GitHub All Releases](https://img.shields.io/github/downloads/MattMoony/10fingersJS/total.svg) ![GitHub repo size in bytes](https://img.shields.io/github/repo-size/MattMoony/10fingersJS.svg) ![GitHub](https://img.shields.io/github/license/MattMoony/10fingersJS.svg) + # 10fingersJS _A pure JavaScript-Typewriter._ --- -This project is still under development, however I hope you'll be able to enjoy the final product / the current framework. +Provide strings and see them magically being typed out on the page. The typer will automatically detect which part of the string should be removed, in order for the new one to correctly appear, so only the necessary parts will be deleted. + +## Installation + +#### Script tag + +```html + +``` + +## Setup + +```javascript +let target = document.getElementById('target'); +let typer = new TenFingers(target); +``` + +## Usage + +#### Basic Example + +In this example we will use TenFingers to type a couple of strings into the [previously](#Setup) specified element. + +```javascript +// ... + +typer.typeAll([ + '!© MattMoony', + 'Hello World!', + 'Hello Whales!', + 'Hello Wales!', + 'Hello Water!', + 'Hello Mum!', + '#great', + 'This is a statement', + 'This is a statement.', +]); + +// ... +``` + +![Result of code above](./media/01.gif) + +#### Or + +You can achieve the same, by using a more complex, but easily customizable syntax. + +```javascript +// ... + +typer.clear() + .type('!© MattMoony') + .pause(1250) + .clear() + .type('Hello World!') + .pause(1250) + .delete('orld!'.length) + .type('hales!') + .pause(1250) + .delete('hales!'.length) + .type('ales!') + .pause(1250) + // and so on ... + +// ... +``` + +#### With options + +Now, we will create a customized typer using the _args_ parameter. + +```javascript +// ... + +let args = { + typingSpeed: 250, + deletingSpeed: 125, + cursorSpeed: .25, + pauseTimeout: 1000, + // pauseTimeoutS: 1, + endTimeout: 3000, + endStringTimeout: 1000, + loop: true, +}; +let typer = new TenFingers(target, args); + +typer.typeAll([ + 'Hello World!', + 'How are you doing?', + 'How are the people around you doing?', + 'Great, it was nice talking to you!', +]); + +// ... +``` + +#### HTML strings + +You can also pass IDs to the typer, it will then use the content of those elements. + +```javascript +// ... + +typer.typeAll([ + '#some_id', + '#some_other_id', +]); + +// ... +``` + +## Conclusion + +That is about it. If you have any further questions or suggestions, feel free to contact me on [twitter](https://twitter.com/Matthia23184857). + +--- -... Matthias M. +_... Matthias M. (March, 2019)_ diff --git a/example/index.html b/example/index.html index abaf235..024e2f4 100644 --- a/example/index.html +++ b/example/index.html @@ -41,13 +41,14 @@

10fingersJS

by MattMoony

-

+

-

+
- + + diff --git a/example/index.js b/example/index.js index 8d41041..ff30dda 100644 --- a/example/index.js +++ b/example/index.js @@ -1,6 +1,3 @@ -// import TenFingers from 'https://cdn.jsdelivr.net/gh/MattMoony/10fingersJS/tenfingers/tenfingers.js'; -import TenFingers from '../src/tenfingers.js'; - // -- For performance measuring -- // let start; diff --git a/media/01.gif b/media/01.gif new file mode 100644 index 0000000..735771c Binary files /dev/null and b/media/01.gif differ diff --git a/src/tenfingers.js b/src/tenfingers.js index 83305c4..73f2e35 100644 --- a/src/tenfingers.js +++ b/src/tenfingers.js @@ -8,7 +8,7 @@ class TypingEvent { } } -export default class TenFingers { +class TenFingers { constructor(target, args) { this.target = target; args = args || {}; @@ -222,4 +222,4 @@ export default class TenFingers { callback(); }, t); } -}; +}