deserve
big moments
a little confetti
We've got something worth CELEBRATING!!
GOOD NEWS!
CONFETTI RAIN
Create a colorful shower of confetti across an entire Showit canvas when it scrolls into view. The effect plays automatically once and works on both desktop and mobile.
HOW TO USE IT
1. CHOOSE YOUR CANVAS
Select the Showit canvas where you want the confetti to appear.
The confetti will stay contained within this canvas.
2. ADD THE CLASS SELECTOR
With the canvas selected, go to:
Advanced → Class Selectors
Add:
confetti-rain
Then click the check mark to save it.
Showit may display it as .confetti-rain after you add it.
3. ADD THE JAVASCRIPT
Select the page name in the Pages panel.
Go to:
Advanced Settings → Page Loaded Javascript
Paste the entire Confetti Rain code into the box.
Do not add <script> tags. Showit adds them automatically.
4. PREVIEW YOUR EFFECT
Preview your page from above the confetti canvas and scroll down.
The confetti will begin automatically when the canvas enters the visitor's screen and will play once.
CUSTOMIZE YOUR CONFETTI
At the top of the code, you'll find the settings you can safely change.
AMOUNT
var amount = 80;
This controls how many pieces of confetti fall.
Increase the number for heavier confetti. Decrease it for a lighter effect.
PIECE SIZE
var minSize = 10;
var maxSize = 20;
These control the size range of the confetti pieces.
Increase the numbers for larger pieces or decrease them for smaller pieces.
RAIN DURATION
var rainDuration = 4000;
This controls how long the confetti continues entering the canvas.
4000 = 4 seconds
Increase the number for a longer celebration. Decrease it for a shorter one.
FALL SPEED
var minFallDuration = 1800;
var maxFallDuration = 3600;
These control how quickly individual pieces fall through the canvas.
Lower numbers make the confetti fall faster. Higher numbers make it fall more slowly.
DRIFT
var driftAmount = 80;
This controls how much the confetti moves from side to side as it falls.
Increase the number for more movement. Decrease it for a straighter fall.
COLORS
Find the colors section at the top of the code:
var colors = [
'#e85555',
'#e6bf28',
'#55a95f',
'#3f78d8',
'#a85fd6'
];
Replace the HEX codes with your own brand colors.
You can also add or remove colors from the list.
Keep the quotation marks, commas and # symbols in place.
MOBILE NOTE
Confetti Rain works on both desktop and mobile.
Style your canvas separately for desktop and mobile as you normally would in Showit. No additional mobile code is required.
QUICK INFO
Difficulty: Easy
Requires: Showit Canvas + Class Selector + Page Loaded Javascript
Class Selector: confetti-rain
Trigger: Canvas enters the screen
Amount: Customizable
Piece Size: Customizable
Rain Duration: Customizable
Fall Speed: Customizable
Drift: Customizable
Colors: Customizable
Effect: Plays once automatically
Mobile: Yes
Coding Knowledge: Not required
CONFETTI TEXT
Turn any native Showit text into colorful multi-colored lettering. Each letter automatically cycles through your chosen colors while keeping the font, size, spacing, and styling you created in Showit.
Use it on headings, single words, announcements, playful statements, or anywhere you want a colorful text effect.
HOW TO USE IT
1. CREATE YOUR TEXT
Add a native text element in Showit.
Type and style your text normally using Showit's text settings.
You can choose your own wording, font, size, weight, spacing, and other styling.
2. ADD THE CLASS SELECTOR
Select the text element and go to:
Advanced → Class Selectors
Add: confetti-text
Then click the check mark to save it.
3. ADD THE JAVASCRIPT
Select the page name in the Pages panel.
Go to:
Advanced Settings → Page Loaded Javascript
Paste the entire Confetti Text code into the box.
Do not add <script> tags. Showit adds them automatically.
If you already have another code in Page Loaded Javascript, such as Confetti Rain, you can place the Confetti Text code underneath it.
Keep each complete code together.
4. CUSTOMIZE THE COLORS
Near the top of the code, find:
var colors = [
'#ff6b6b',
'#ffd93d',
'#6bcb77',
'#4d96ff',
'#c77dff'
];
Replace these hex codes with your own colors.
You can also add or remove colors from the list.
Keep each hex code inside quotation marks and separate the colors with commas.
The code will automatically cycle through the colors as it moves through the letters.
MATCH IT WITH CONFETTI RAIN
If you're also using the Confetti Rain effect, you can use the same color hex codes in both codes.
This makes the text and falling confetti coordinate automatically.
You do not need Confetti Rain to use Confetti Text. Each effect works independently.
TEXT NOTE
You do not need to enter your wording anywhere in the code.
Simply change the text directly in Showit and the code will automatically color the letters.
MOBILE NOTE
Confetti Text works on both desktop and mobile.
QUICK INFO
Difficulty: Easy
Requires: Class Selector + Page Loaded Javascript
Class Selector: confetti-text
Text: Native Showit text
Colors: Customizable
Animation: None
Mobile: Yes
Coding Knowledge: Not required