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
   
jQuery Plugin For Hover-triggered Sparkle Effect - sparkleHover

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.