Creating sparkle effect when mouse hover over an object in Shopify

Sell Online With Shopify
Trusted by millions of businesses worldwide
Sign up for a free trial and enjoy 3 months of Shopify for $1/month on select plans.

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.

Step 2:

Attach the plugin to any element on DOM ready, with default options.

Step 3:

Config the sparkle effect with the following options.

  • 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.


Looking for Shopify Experts?

Hura Apps can help you take your store to the next level

Our team of experienced designers and developers can help you create a beautiful, high-converting Shopify store that will drive sales and increase customer satisfaction. From custom design to app development and optimization, we have the skills and expertise to help you achieve your eCommerce goals.

Get in touch

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *