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

You may also like...

Leave a Reply

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