Skip to content

Commit 3da6982

Browse files
committed
🏷️ Version/1.0
1 parent 9933851 commit 3da6982

File tree

5 files changed

+261
-330
lines changed

5 files changed

+261
-330
lines changed

.gitignore

-330
This file was deleted.

README.md

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Faketyper
2+
Faketyper is a small tool that i wrote mainly for fun.
3+
It takes text from HTML element, empties it, and then writes it back letter by letter.
4+
See the live demo [here](https://kamilbeben.github.io/faketyper/).
5+
6+
# Usage
7+
In order to use Faketyper, you must first include it's files in the HTML file. This is done by including the following in `<head>` section
8+
```html
9+
<script src="https://cdn.jsdelivr.net/gh/kamilbeben/faketyper@1.0/faketyper.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kamilbeben/faketyper@1.0/faketyper.css">
11+
```
12+
Then, insert some element with class `faketyper` and text inside it.
13+
```html
14+
<span class="faketyper example">
15+
Hello there
16+
</span>
17+
```
18+
And initialize the faketyper
19+
```js
20+
faketyper.init({
21+
selector: '.faketyper.example',
22+
interval: 5
23+
})
24+
```
25+
Note:
26+
`faketyper.init` returns a `Promise`, which will be resolved as soon as it will stop typing. This can be handful if you need to specify different options for certain elements. See [index.html](https://github.com/kamilbeben/faketyper/blob/master/index.html) for examples.
27+
28+
# Options
29+
| name | type | default | description |
30+
|:-|:-|:-|:-|
31+
| selector | CSS selector string | `'.faketyper.auto'` | Selector pointing to elements which will be affected by faketyper |
32+
| delay | number | `0` | Time before the rendering starts |
33+
| interval | number | `25` | Time between rendering two letters |
34+
| duration | number | `null` | Duration of the whole process. If set, **interval** is ignored |
35+
| showPrompt | boolean | `false` | Emulate command prompt sign |
36+
37+
# Requirements
38+
None. It's written in Vanilla JS.
39+
40+
# Additional notes
41+
Though this is licensed by MIT license and you can use it as you want, i would be glad to know whenever someone found this useful.

faketyper.css

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@keyframes blink {
2+
50% { opacity: 1 }
3+
100% { opacity: 0 }
4+
}
5+
6+
.prompt::after {
7+
content: "_";
8+
animation: blink 1s linear infinite;
9+
}
10+
11+
.faketyper:not(.visible) {
12+
opacity: 0;
13+
}

0 commit comments

Comments
 (0)