Skip to content

ianaya89/vue-glitch

Folders and files

NameName
Last commit message
Last commit date

Latest commit

136f8db Β· Jun 23, 2022

History

58 Commits
May 29, 2019
Jul 19, 2017
Jul 19, 2017
Jul 19, 2017
Jul 19, 2017
Jul 19, 2017
Jul 19, 2017
Jul 19, 2017
Jul 19, 2017
Jul 19, 2017
Jul 19, 2017
Jul 19, 2017
Jul 19, 2017
Jul 19, 2017
Jul 19, 2017
Jun 23, 2022
Jul 19, 2017
Jun 23, 2022

Repository files navigation

vue-glitch

πŸ‘» Vue.js component to apply glitch effect in any kind of text

Codeship Status for ianaya89/vue-esc Coverage Status

glitch preview

Install

$ npm i -S vue-glitch

# or

$ yarn add vue-glitch

Global 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 .glitch and .glitch-wrapper classes.

.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 build

License

MIT License

Style

js-standard-style


This project was generated with generator-vue-component and was inspired by this Codepen by @anatravas

⌨️ with ❀️ by @ianaya89

About

πŸ‘» Vue.js component to apply glitch effect in any kind of text

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

Packages

No packages published