Creating Animated Firefly Flying Effect in Shopify
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.
1 | {{ '//cdn.shopify.com/s/files/1/0382/4185/files/jquery.firefly-v0.7.js' | script_tag }} |
Step 2:
Initialize the plugin to generate a default firefly background for the whole body.
1 | $.firefly(); |
To apply the firefly background to a container element you specify, follow this step:
1 2 3 | <div id="ShopifyTips-firefly"> ... </div> |
1 2 3 | $.firefly({ on: '#ShopifyTips-firefly' }); |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $.firefly({ total: 65, ofTop: 0, ofLeft: 0, on: 'document.body', twinkle: 0.2, minPixel: 5, maxPixel: 10, color: '#ff4848', namespace: 'shopifytips-jQueryFireFly', zIndex: Math.ceil(Math.random() * 20) - 1, borderRadius: '50%', _paused: false }); |
