vue-glitch
👻 Vue.js component to apply glitch effect in any kind of text
Install
$ npm i -S vue-glitch
# or
$ yarn add vue-glitchGlobal Registration
// main.js
import Vue from 'vue';
import Glitch from 'vue-glitch';
Vue.component('glitch', Glitch);Local Registration
<script>
// Component.vue
import Glitch from 'vue-glitch';
export default {
name: 'Component',
components: { Glitch }
};
</script>Component Usage
<template>
<main>
<glitch text="Glitched"></glitch>
<glitch text="Glitched with custom color", color="tomato"></glitch>
<glitch text="Glitched with custom background", background="steelblue"></glitch>
</main>
</template>Component Properties
| name | required | default |
|---|---|---|
| text | true |
|
| color | false |
#fff |
| background | false |
#000 |
Component Styling
To apply custom styles you should care about
.glitchand.glitch-wrapperclasses.
.glitch {
margin-bottom: 20px;
padding: 20px;
font-size: 40px;
}
.glitch-wrapper {
font-family: sans-serif;
}Development Setup
# install dependencies
$ npm i
# dev mode
$ npm run dev
# test
$ npm run test
# build
$ npm run buildLicense
Style
This project was generated with generator-vue-component and was inspired by this Codepen by @anatravas