jQuery Plugin For Hover-triggered Sparkle Effect - sparkleHover
File Size: | 6.67 KB |
---|---|
Views Total: | 4546 |
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.