Creating Animated Firefly Flying Effect 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.

Animated Firefly is a fancy and interesting effect that creates random firefly flying animations within an HTML DOM element.


You can create this effect to your Shopify store.

Step 1:

Loading the jQuery firefly.js after jQuery library.

Step 2:

Initialize the plugin to generate a default firefly background for the whole body.

To apply the firefly background to a container element you specify, follow this step:

Full plugin options to customize the firefly effect.

  • total: The amount of fireflies to create
  • ofTop: The offset for the top
  • ofLeft: The offset for the left
  • on: The content to put the fireflies in
  • twinkle: The opacity of the fireflies
  • minPixel: The smallest the fireflies can be
  • maxPixel: The largest the fireflies can be
  • color: The color of the fireflies
  • namespace: The class the fireflies have
  • zIndex: The z-index on which the fireflies are placed on
  • borderRadius: The border radius for the fireflies
  • _paused: Whether or not the fireflies is are paused

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 *