Fireworks

FIREWORKS

Launch a colorful fireworks display with sound from any clickable element on your Showit website.

Add the trigger to a button, text, image, shape, or other element, then customize the colors, display length, and fireworks to fit your design.


WHAT YOU'LL NEED

One Showit element to trigger the fireworks

The Fireworks code

The Class Selector:

fireworks-trigger


HOW TO INSTALL


01 — ADD YOUR TRIGGER

Choose the Showit element you want visitors to click to launch the fireworks.

You can use a:

Button

Text box

Image

Shape

Icon

Or other clickable element


02 — ADD THE CLASS SELECTOR

Select your trigger element in Showit.

Go to:

Advanced → Class Selectors

Add:

fireworks-trigger

Do not include the period before the class name.


03 — ADD THE CODE

Open:

Page → Advanced Settings → Page Loaded Javascript

Paste in the entire Fireworks code.

The fireworks will display across the visitor's screen when they click your trigger element.


04 — CHOOSE YOUR COLORS

At the top of the code, find:

colors: [
  "#F4C86A",
  "#F0A6A6",
  "#C7B8E8",
  "#A9D8E8",
  "#F5E8C8"
],

Replace any of the hex codes with colors that fit your website.

You can use one color or several.

Each firework will randomly select from the colors in your list.


05 — CHOOSE YOUR FIREWORK STYLES

Find:

burstStyles: [
  "classic",
  "starburst",
  "willow",
  "double"
],

The display includes four firework styles:

classic

starburst

willow

double

All four styles are included by default and are randomly mixed throughout the display.

If you don't want to use a particular style, simply remove it from the list.


06 — ADJUST THE DISPLAY

The customization section also lets you change:

displayDuration — How long new fireworks continue launching

launchIntervalMin — Minimum time between fireworks

launchIntervalMax — Maximum time between fireworks

rocketDuration — How quickly each firework travels into the air

rocketTrailLength — Length of the trail behind each firework

rocketSparkChance — Frequency of sparks in the launch trail

particleCount — General number of sparks in each explosion

burstSize — General size of the fireworks

particleLife — How long the sparks remain visible

gravity — How quickly the sparks fall

soundEnabled — Turn the firework sound on or off

soundVolume — Adjust the volume of the fireworks

soundVariation — Adds slight variation to each firework sound

The firework sound is already built into the code, so no separate audio file is needed.

Everything below:

CODE BELOW
NO EDITING NEEDED

can be left alone.


07 — PREVIEW + TEST

Open Preview and click your trigger element.

Your fireworks should launch from the bottom of the screen and burst across the page.

Test the effect on both desktop and mobile before publishing.


DESIGN TIP

Fireworks work especially well for celebratory moments like launches, announcements, milestones, weddings, events, booking confirmations, or a playful call to action.

Because the fireworks display across the visitor's screen, you don't need to add or size a separate fireworks canvas.


QUICK INFO

DIFFICULTY — Easy

REQUIRES — Showit Element + Page Loaded Javascript

CLASS SELECTOR — fireworks-trigger

TRIGGER — Click

FIREWORK COLORS — Customizable

FIREWORK STYLES — 4

DISPLAY LENGTH — Customizable

FIREWORK SIZE — Customizable

LAUNCH SPEED — Customizable

SOUND — Included + Customizable

MOBILE FRIENDLY — Yes

CODING KNOWLEDGE — Not required