Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/orlandster/vue-typed-js
Typed.js integration for vue.js. Create a typing animation.
https://github.com/orlandster/vue-typed-js
typed typed-js typing typing-animation vue vuejs vuejs2
Last synced: about 1 month ago
JSON representation
Typed.js integration for vue.js. Create a typing animation.
- Host: GitHub
- URL: https://github.com/orlandster/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 (6 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
[![npm](https://img.shields.io/npm/v/vue-typed-js.svg) ![npm](https://img.shields.io/npm/dm/vue-typed-js.svg)](https://www.npmjs.com/package/vue-typed-js)
[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/8789841c45264d19ad2595061437a8a9)](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)