shine-links
v1.0.2
Published
Cartoon shine sweep effect for links
Maintainers
havishhhReadme
shine-links ✦
Cartoon shine sweep for links. One script tag, zero config.
What is it?
A ~20 line vanilla JS script that adds a left-to-right cartoon shine animation to links or any element. No dependencies, no build step.
Installation
CDN — recommended, no install:
<script src="https://cdn.jsdelivr.net/npm/shine-links/shine.js"></script>Local file:
Download shine.js, put it next to your HTML, then:
<script src="shine.js"></script>npm:
npm install shine-linksimport "shine-links";Usage
Add the shine class to any element:
<a class="shine" href="#">Documentation</a>Or apply to all links at once:
document.querySelectorAll("a").forEach(el => el.classList.add("shine"));Full example
<!DOCTYPE html>
<html>
<head>
<style>
a { color: #d4d4d4; text-decoration: none; }
</style>
</head>
<body>
<a href="#">My link</a>
<script src="shine.js"></script>
<script>
document.querySelectorAll("a").forEach(el => el.classList.add("shine"));
</script>
</body>
</html>Links
- GitHub: https://github.com/havishhexe/shiny
- npm: https://www.npmjs.com/package/shine-links
- CDN: https://cdn.jsdelivr.net/npm/shine-links/shine.js
License
MIT