An easy to use link and text hover effect library for VueJS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README gif updated Jun 6, 2018
dev docs updated Jun 6, 2018
dist version upgraded Jul 6, 2018
docs docs updated Jun 6, 2018
src feat(vgl-components): handle event listeners Jun 21, 2018
.eslintrc initial commit May 31, 2018
.gitignore ignores May 31, 2018
.npmignore ignores May 31, 2018
CODE_OF_CONDUCT.md initial commit May 31, 2018
LICENSE initial commit May 31, 2018
README.md correct documentation to add styles Jul 6, 2018
bili.config.js initial commit May 31, 2018
package-lock.json 0.0.3 Jul 6, 2018
package.json 0.0.3 Jul 6, 2018

README.md

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