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
