Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Orlandster1998/vue-typed-js
Typed.js integration for vue.js. Create a typing animation.
https://github.com/Orlandster1998/vue-typed-js
typed typed-js typing typing-animation vue vuejs vuejs2
Last synced: about 2 months ago
JSON representation
Typed.js integration for vue.js. Create a typing animation.
- Host: GitHub
- URL: https://github.com/Orlandster1998/vue-typed-js
- Owner: Orlandster
- License: mit
- Created: 2018-05-14T19:31:07.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T17:05:34.000Z (almost 2 years ago)
- Last Synced: 2024-05-29T11:22:11.077Z (4 months ago)
- Topics: typed, typed-js, typing, typing-animation, vue, vuejs, vuejs2
- Language: JavaScript
- Homepage: http://www.mattboldt.com/demos/typed-js/
- Size: 387 KB
- Stars: 452
- Watchers: 5
- Forks: 37
- Open Issues: 41
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-typed-js
[ ](https://www.npmjs.com/package/vue-typed-js)
[](https://vuejs.org/)
[](https://www.codacy.com/app/orlando.wenzinger/vue-typed-js?utm_source=github.com&utm_medium=referral&utm_content=Orlandster1998/vue-typed-js&utm_campaign=Badge_Grade)
A Vue.js integration for Typed.js.
Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.
Checkout the offical project [here](https://github.com/mattboldt/typed.js/).
## Table of contents
- [Installation](#installation)
- [Usage](#usage)
- [Example](#examples)
# Installation
```
npm install --save vue-typed-js
```
## Default import
Install the component:
```javascript
import Vue from 'vue'
import VueTypedJs from 'vue-typed-js'
Vue.use(VueTypedJs)
```
**⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.**
## Browser import
```html
```
The plugin should be auto-installed. If not, you can install it manually with the instructions below.
Install all the components:
```javascript
Vue.use(VueTypedJs)
```
# Usage
To get started simply add the `vue-typed-js` custom element to your `template` and pass the text, which should be typed to the `strings` property. In addition you need to pass an element with the class `typing` to the slot, which will be used as a `wrapper`.
Minimal setup:
```html
```
The `typing` class also allows you to just animate certain parts of a string:
```html
Hey
```
## Properties
You can make use of the following properties in order to customize your typing expirience:
| Property | Type | Description | Usage |
|----------------------|---------|----------------------------------------------------------------------|-----------------------------------------------------------------|
| strings | Array | strings to be typed | `:strings="['Text 1', 'Text 2']"` |
| stringsElement | String | ID of element containing string children | `:stringsElement="'myId'"` |
| typeSpeed | Number | type speed in milliseconds | `:typeSpeed="50"` |
| startDelay | Number | time before typing starts in milliseconds | `:startDelay="1000"` |
| backSpeed | Number | backspacing speed in milliseconds | `:backSpeed="10"` |
| smartBackspace | Boolean | only backspace what doesn't match the previous string | `:smartBackspace="true"` |
| shuffle | Boolean | shuffle the strings | `:shuffle="true"` |
| backDelay | Number | time before backspacing in milliseconds | `:backDelay="100"` |
| fadeOut | Boolean | Fade out instead of backspace | `:fadeOut="true"` |
| fadeOutClass | String | css class for fade animation | `:fadeOutClass="'fadeOutClass'"` |
| fadeOutDelay | Number | fade out delay in milliseconds | `:fadeOutDelay="500"` |
| loop | Boolean | loop strings | `:loop="true"` |
| loopCount | Number | amount of loops | `:loopCount="3"` |
| showCursor | Boolean | show cursor | `:showCursor="true"` |
| cursorChar | String | character for cursor | `:cursorChar="'_'"` |
| autoInsertCss | Boolean | insert CSS for cursor and fadeOut into HTML | `:autoInsertCss="true"` |
| attr | String | attribute for typing Ex: input placeholder, value, or just HTML text | `:attr="'placeholder'"` |
| bindInputFocusEvents | Boolean | bind to focus and blur if el is text input | `:bindInputFocusEvents="true"` |
| contentType | String | 'html' or 'null' for plaintext | `:contentType="'html'"` |
## Events
You can listen to the following events:
| Event | Description | Usage |
|------------------------|----------------------------------------------------------------------|-----------------------------------------------------------------|
| onComplete | All typing is complete | `@onComplete="doSmth()"` |
| preStringTyped | Before each string is typed | `@preStringTyped="doSmth()"` |
| onStringTyped | After each string is typed | `@onStringTyped="doSmth()"` |
| onLastStringBackspaced | During looping, after last string is typed | `@onLastStringBackspaced="doSmth()"` |
| onTypingPaused | Typing has been stopped | `@onTypingPaused="doSmth()"` |
| onTypingResumed | Typing has been started after being stopped | `@onTypingResumed="doSmth()"` |
| onReset | After reset | `@onReset="doSmth()"` |
| onStop | After stop | `@onStop="doSmth()"` |
| onStart | After start | `@onStart="doSmth()"` |
| onDestroy | After destroy | `@onDestroy="doSmth()"` |
## Features
Checkout features like `type pausing`, `smart backspacing` etc. on the libraries [page](https://github.com/mattboldt/typed.js/).
# Examples
Here are several examples:
```html
We are a company!
```
---
# License
[MIT](http://opensource.org/licenses/MIT)