xaksis / vue-good-links

An easy to use link and text hover effect library for VueJS

vue-good-links

An easy to use link/text hover effect library for VueJS

Live Demo

vue-good-links Demo

If you endup using and liking vue-good-links, consider spreading the joy :)

Follow the project progress live

Vue-good-links Project

Installing

Install with npm:

npm install --save vue-good-links

Usage

import directly into components:

<template>
  <div>
    this is my <vgl-swing text="fancy text"></vgl-swing>
  </div>
</template>

<script>
import {VglSwing} from 'vue-good-links';

export default {
  components: {
    'vgl-swing': VglSwing,
  },
};
</script>

or use globally

import VueGoodLinks from 'vue-good-links';

// import the styles 
import 'vue-good-links/dist/vue-good-links.css';

Vue.use(VueGoodLinks);

List of Effects

• VglWave
• VglRollup
• VglSlidein
• VglGhost
• VglSwing
• VglRotate

Component Options

Option	Description	Type, Example
originalSpanStyle	css styles for standing text span. (applies to all but VglWave)	<vgl-swing :originalSpanStyle="{color: 'blue'}" text="fancy!"></vgl-swing>
hoverSpanStyle	css styles for hovering text span. (applies to all but VglWave)	<vgl-swing :hoverSpanStyle="{color: 'blue'}" text="fancy!"></vgl-swing>

License

This project is licensed under the MIT License - see the LICENSE.md file for details

inspiration for effects taken from Tympanus