jQuery Plugin For Hover-triggered Sparkle Effect - sparkleHover
| File Size: | 6.67 KB |
|---|---|
| Views Total: | 4623 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
sparkleHover is a funny jQuery plugin which lets you apply configurable sparkle effects to any elements using arbitrary shapes (circle, square, triangle) or images when mouse hover.
How to use it:
1. Place the JavaScript file sparkleHover.js after jQuery and the sparkleHover plugin is ready for use.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="sparkleHover.js"></script>
2. Attach the plugin to any element on DOM ready, with default options.
$('#demo').sparkleHover();
3. Config the sparkle effect with the following options.
$('#demo').sparkleHover({
// an array of sprite colors
colors : ['#2DE7F0', '#FA5C46'],
// number of sprites
num_sprites: 22,
// in milliseconds
lifespan: 1000,
// spread radius
radius: 300,
// size of sprites
sprite_size: 10,
// 'circle', 'square' or 'triangle'
shape: 'circle',
// enable gravity
gravity: 'false',
});
4. If you'd like to use an image for the sprites.
$('#demo').sparkleHover({
image: '1.jpg'
});
This awesome jQuery plugin is developed by evejweinberg. For more Advanced Usages, please check the demo page or visit the official website.








