https://github.com/ianaya89/vue-glitch

👻 Vue.js component to apply glitch effect in any kind of text
https://github.com/ianaya89/vue-glitch

component glitch vue

Last synced: 20 days ago
JSON representation

👻 Vue.js component to apply glitch effect in any kind of text

• Host: GitHub
• URL: https://github.com/ianaya89/vue-glitch
• Owner: ianaya89
• License: mit
• Created: 2017-07-19T07:12:27.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T17:04:21.000Z (almost 2 years ago)
• Last Synced: 2024-04-15T08:07:56.878Z (7 months ago)
• Topics: component, glitch, vue
• Language: JavaScript
• Homepage: https://ianaya89.github.io/vue-glitch
• Size: 2.54 MB
• Stars: 51
• Watchers: 4
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-glitch

> 👻 Vue.js component to apply glitch effect in any kind of text

[ ![Codeship Status for ianaya89/vue-esc](https://app.codeship.com/projects/3738d4b0-082d-0135-8a91-66ea66f8c9cb/status?branch=master)](https://app.codeship.com/projects/214292)

[![Coverage Status](https://coveralls.io/repos/github/ianaya89/vue-glitch/badge.svg)](https://coveralls.io/github/ianaya89/vue-glitch)

![glitch preview](src/assets/preview.gif)

## Install

```bash

$ npm i -S vue-glitch

# or

$ yarn add vue-glitch

```

## Global Registration

```javascript

// main.js

import Vue from 'vue';

import Glitch from 'vue-glitch';

Vue.component('glitch', Glitch);

```

## Local Registration

```html

  // Component.vue

  import Glitch from 'vue-glitch';

  export default {

    name: 'Component',

    components: { Glitch }

  };

```

## Component Usage

```html

  

    

    

    

  

```

## Component Properties

| name | required | default |

| :---: | :---: | :---: |

| text | `true` |  |

| color | `false` | `#fff` |

| background | `false` | `#000` |

## Component Styling

> To apply custom styles you should care about `.glitch` and `.glitch-wrapper` classes.

```css

.glitch {

  margin-bottom: 20px;

  padding: 20px;

  font-size: 40px;

}

.glitch-wrapper {

  font-family: sans-serif;

}

```

## Development Setup

```bash

# install dependencies

$ npm i

# dev mode

$ npm run dev

# test

$ npm run test

# build

$ npm run build

```

## License

[MIT License](https://github.com/ianaya89/vue-glitch/blob/master/LICENSE)

## Style

[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](http://standardjs.com)

---

*This project was generated with [generator-vue-component](https://github.com/ianaya89/generator-vue-component) and was inspired by [this](https://codepen.io/anatravas/pen/mOyNWR) Codepen by [@anatravas](https://codepen.io/anatravas/)*

**⌨️ with ❤️ by [@ianaya89](https://twitter.com/ianaya89)**