https://github.com/SabatinoMasala/vue-text-glitch

Vue text glitch component
https://github.com/SabatinoMasala/vue-text-glitch

javascript vue

Last synced: 4 days ago
JSON representation

Vue text glitch component

• Host: GitHub
• URL: https://github.com/SabatinoMasala/vue-text-glitch
• Owner: SabatinoMasala
• Created: 2017-10-23T16:41:38.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-10-23T16:54:14.000Z (about 7 years ago)
• Last Synced: 2024-08-03T20:14:02.299Z (4 months ago)
• Topics: javascript, vue
• Language: JavaScript
• Size: 392 KB
• Stars: 79
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Vue text glitch

Vue text glitch component.

![Demo](https://github.com/SabatinoMasala/vue-text-glitch/blob/master/images/glitch.gif?raw=true)

[Check out the demo](https://sabatinomasala.github.io/vue-text-glitch/)

## Getting started

Pull in the package:

```sh

yarn add vue-text-glitch

```

Import the component:

```js

import VueTextGlitch from 'vue-text-glitch'

export default {

    components: {

        VueTextGlitch

    }

}

```

Use in your template:

```vue

```

## Features

* Animation is generated using Javascript

* Multiple different glitches on the same page

* Plug and play

## Props

### text (default `Vue Text Glitch`)

The text that should be glitched.

### steps (default `20`)

Number of keyframes in the animation. 20 means there's a keyframe every 100/20 = 5%.

### height (default `2`)

The animation speed.

### id (default `text-glitch`)

This is a prefix for the animation and styles, so you can use multiple different glitches on the same page.

### speed (default `false`)

Whether or not to apply the error class

### fill (default `#2c3e50`)

The fill color.

### background (default `#fff`)

The background color.

### highlight1 (default `red`)

First highlight color.

### highlight2 (default `blue`)

Second highlight color.

## Credit

* Effect and explanation: [CSS Tricks](https://css-tricks.com/glitch-effect-text-images-svg/)