Author: | shadeed |
---|---|
Views Total: | 730 views |
Official Page: | Go to website |
Last Update: | June 24, 2019 |
License: | MIT |
Preview:

Description:
Underliner.js is a small script which applies creative, animated underlines to elements on hover by using JavaScript and SVG path animations.
How to use it:
Create an SVG for the underlines.
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 100 100"> <defs> <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#00bc9b" /> <stop offset="100%" stop-color="#5eaefd" /> </linearGradient> <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#5eaefd" /> <stop offset="100%" stop-color="#00bc9b" /> </linearGradient> </defs> </svg>
Load the Underliner.js script right before the closing body tag.
<script src="underliner.js"></script>
Apply the underlines to the target elements. Available parameters:
- selector: target element
- color1: color 1
- color2: color 2
- thickness: thickness 1
- thickness: thickness 2
- strokeLinecap: edges of an SVG path
- rtl: right to left. true of false
// new Underliner(selector, color1, color2, thickness1, thickness2, strokeLinecap, rtl); new Underliner(".element", "url(#gradient)", "url(#gradient2)", 7, 12, "round", false);