Mouse Hover Twinkling Stars Plugin jQuery-canvas-sparkles

Add-ons

2026-08-03 13:23 4 次浏览 • 0 次下载 50.0KB

Mouse Hover Twinkling Stars Plugin jQuery-canvas-sparkles

Plugin Description: jQuery-canvas-sparkles is a cool jQuery and Canvas plugin that creates sparkling star effects. It can produce beautiful twinkling stars on DOM elements. You can specify the number, color, size, and movement direction of the stars.

Usage

Include the jquery and jquery-canvas-sparkles.js files in your page.

1 2	`<script` `src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>` `<script` `src="dist/jquery-canvas-sparkles.js"></script>`

HTML Structure

For example, if you want to create a sparkling star effect on an image, its HTML structure looks like this:

<div >
   <img id="image" src="demo.jpg">
</div>

Initialize the Plugin

After the page DOM elements have finished loading, initialize this jQuery star sparkle plugin using the sparkle() method.

1	`$(".element").sparkle();`

Configuration Parameters

The available configuration parameters for this jQuery and Canvas star sparkle plugin are:

$(document).ready(function() {
    $("img").sparkle({
        // Color: accepts a HEX string, the keyword "rainbow", or an array of HEX strings
        color: ["#2eafea", "#e56604"],
        // Number of stars displayed at once
        count: 30,
        // Distance from the edge of the canvas at which overlap occurs
        overlap: 0,
        // Set the speed
        speed: 1,
        // Minimum size
        minSize: 4,
        // Maximum size
        maxSize: 7,
        // Direction of star movement. Can be "up", "down", or "both"
        direction: "both"
    });
});

Events

The following events can be used to trigger the start, stop, and resizing of the stars.

start.sparkle: Triggers the stars to start sparkling.
stop.sparkle: Stops the star sparkle effect.
resize.sparkle: Dynamically changes the canvas dimensions and adjusts the positions of the stars.

For example:

// first we need an element with sparkles
$("header").sparkle();
 
// here we can remove the default mouse/keyboard triggers for sparkles,
// perhaps we don't want them to trigger on interaction
$("header")
   .off("mouseover.sparkle")
   .off("mouseout.sparkle")
   .off("focus.sparkle")
   .off("blur.sparkle")
 
// we can also trigger the start/stop events on the element
// which has the sparkles bound to it!
$("header")
   .trigger("start.sparkle")
   .on("click", function() {
       $(this).trigger("stop.sparkle");
   });
     
// it's also possible to resize teh canvas and reposition 
// the sparkles whenever the browser is resized...
var timer;
$(window).on("resize", function(){
   clearTimeout(timer);
   timer = setTimeout(function(){
       $("header").trigger("resize.sparkle");
   },200);
});