Creating sparkle effect when mouse hover over an object in Shopify
jQuery-canvas-sparkles is a funny jQuery plugin which lets you apply sparkle effects to any elements or images when mouse hover.
jQuery-canvas-sparkles can be used as a hover effect for your page, showing small, random generated, animated sparkles next to an element.
The effect is transparent and can be used with buttons, text, images, and practically any type of DOM element that can be selected by jQuery’s engine.
The sparkle effect can be single-colored or multi-colored, depending on the developer’s preference.
Besides the sparkles’ color, developers can also control the sparkle count, overlapping settings, animation speed and their size variance.
You use this jQuery plugin to your Shopify store.
Step 1:
Place the JavaScript file jquery-canvas-sparkles.js after jQuery and the jQuery-canvas-sparkles plugin is ready for use.
1 | {{ '//cdn.shopify.com/s/files/1/0382/4185/files/jquery-canvas-sparkles.js' | script_tag }} |
Step 2:
Attach the plugin to any element on DOM ready, with default options.
1 | $(".element").sparkle(); |
Step 3:
Config the sparkle effect with the following options.
1 2 3 4 5 6 7 8 9 | $(".element").sparkle({ color: ["#ff0080","#ff0080","#FFF"], count: 30, overlap: 0, speed: 1, minSize: 4, maxSize: 7, direction: "both" }); |
- color: An array of sparkles colors
- count: Accepts a number to determine how many sparkles will be on the element at a time. Larger elements need more sparkles, but after a few hundred things can bog down.
- overlap: Accepts a nummber which tells the canvas how far over the edge of it’s container it should overlap in pixels.
- speed: Accepts a floating point number to set the speed multiplier, you may need to experiment with this
- size: Accepts a number for both min/max to set the size in pixels of the sparkles. Sizes are randomized between min and max.
- direction: Accepts a string of “up”, “down” or “both” to set which direction the sparkles will travel in.
