Apply a glitch effect with the Vue Glitch component
vue-glitch
Styling preferences can be very different and with Vue it can be really easy to give a unique look to your elements. Vue Glitch comes in to serve as a component for Vue.js which can be used to apply a glitch effect in any kind of text.
You can see it live here.
Example
To start working with vue-glitch use the following command to install it.
$ yarn add vue-glitch
Import in your project
import Glitch from 'vue-glitch'
Vue.component('glitch', Glitch)
Component Usage:
<glitch text="Glitched"></glitch>
<glitch
text="Text appeared to be stuck" color="DeepPink"
>
</glitch>
<glitch text="Text that looks spooky with custom background" color="Orange"
background="steelblue"
>
</glitch>
To apply custom styles you can use .glitch
and .glitch-wrapper
classes.
.glitch {
margin-bottom: 20px;
padding: 20px;
}
.glitch-wrapper {
font-size: 40px;
font-family: sans-serif;
}
If you would like to explore more about Vue Glitch, head to the project's repository on GitHub, where you will also find the source code. Created & submitted by @ianaya89.