Link And Text Hover Effects For Vue.js

Link And Text Hover Effects For Vue.js

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

vue-good-links

npm npm

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

Live Demo

vue-good-links Demo

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

Buy Me A Coffee

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

Github Repository

Tags: #Vue.js