\
**Category:** CMS Development\
**Created:** [April 25, 2017, 2:53pm UTC](https://community.hubspot.com/t/trying-to-create-a-confetti-effect-in-html/1751 "2017-04-25T14:53:27Z")\
**Posts on this page:** 6\
**Page:** 1
**Author:**  [@Kkitchens](https://community.hubspot.com/u/Kkitchens)\
**Post date:** [April 25, 2017, 2:53pm UTC](https://community.hubspot.com/t/trying-to-create-a-confetti-effect-in-html/1751/1 "2017-04-25T14:53:27Z")
I am working on a “Congratulations” type of landing page. I can’t seem to get it to actually render on the page, it just comes up blank. Please help..
---
**Author:**  [@roisinkirby](https://community.hubspot.com/u/roisinkirby)\
**Post date:** [April 25, 2017, 3:21pm UTC](https://community.hubspot.com/t/trying-to-create-a-confetti-effect-in-html/1751/2 "2017-04-25T15:21:41Z")
Hey @Kkitchens are you able to apply CSS and JS also? Both scripts will be needed for this sort of animation, here’s what I was able to find on Codepen: [https://codepen.io/linrock/pen/Amdhr](https://codepen.io/linrock/pen/Amdhr) and stackoverflow: [http://stackoverflow.com/questions/16322869/trying-to-create-a-confetti-effect-in-html5-how-do-i-get-a-different-fill-color](http://stackoverflow.com/questions/16322869/trying-to-create-a-confetti-effect-in-html5-how-do-i-get-a-different-fill-color)
---
**Author:**  [@Kkitchens](https://community.hubspot.com/u/Kkitchens)\
**Post date:** [April 25, 2017, 3:37pm UTC](https://community.hubspot.com/t/trying-to-create-a-confetti-effect-in-html/1751/3 "2017-04-25T15:37:31Z")
Hi @roisinkirby,
I’m not really sure how to go about the JS? I had entered the HTML and the CSS to where i believe it belonged.
---
**Author:**  [@roisinkirby](https://community.hubspot.com/u/roisinkirby)\
**Post date:** [April 26, 2017, 12:22pm UTC](https://community.hubspot.com/t/trying-to-create-a-confetti-effect-in-html/1751/4 "2017-04-26T12:22:29Z")
I msyelf have little experience with JS, but can dig out a few Community members who might. In this case though, you will need to work with a developer - do you have a designer on your team?
---
**Author:**  [@Ty](https://community.hubspot.com/u/Ty)\
**Post date:** [April 26, 2017, 3:14pm UTC](https://community.hubspot.com/t/trying-to-create-a-confetti-effect-in-html/1751/5 "2017-04-26T15:14:17Z")
**First up, I’m going to apologize for the length of this answer, but this should get your confetti running!**
Hi @Kkitchens (cc: @roisinkirby),
I actually just created a proof of concept for Academy to use something similar. I built mine out of HTML5 Canvas, which is an html element tag that you can use Javascript to draw, animate and repeat objects. More can be found [here](https://www.w3schools.com/html/html5_canvas.asp). For this example, I built my quick proof out of reoccuring HTML elements, since Canvas has a pretty steep learning curve.
Implementing something like this should be relatively painless, and of course, I’ll help you out! For this tutorial, we’ll use this [quick proof](http://jsfiddle.net/01m43m7L/2/embed/result/) (result only) of concept I mocked up, I left comments in the JS to make it easier to understand 🙂
So if you look at the code/innerworkings of the confetti [here](https://jsfiddle.net/01m43m7L/2/), you’re going to see a couple things:
1. I’m dynamically generating the confettit divs
2. All of this is controlled through javascript
3. All confetti is styled through regular CSS.
4. \*I am not using canvas\*
**Section 1: Creating Your Confetti**
Let’s get started, take a look at the **HTML**
``
_Thats it!,_ all you need is your container div of where you push your canvas elements.
Now let’s look at our **CSS** , this is what will be styling all of our confetti pieces
```auto
.wrapper{
position: relative;
min-height: 100vh;
}
[class |= "confetti"]{
position: absolute;
}
.red {
background-color: #dc2626;
}
.yellow {
background-color: #ffbf00;
}
.blue {
background-color: #6eaff3;
}
```
Here is what each declaration is doing:
- Wrapper - Sets the position to relative and makes the height 100% of the viewport/window (ie: fullscreen)
- confetti - Sets all the confetti elements to absolute position, thus removing them from document flow
- colors (r, y, b) - When the divs are created, they are set a class, this class will decide what color the confetti piece is
And now, the fun part! The **JS** , this ist the creation of each confetti piece and how it is animated. (I left the comments in the script for you)
```auto
// For loop to create all of your confetti items on load
for (var i = 0; i < 30; i++){
create(i);
}
function create(i){
// Create confetti particles
//Generates random number, then multiples by 15
var width = Math.random() * 15;
//Takes generated width, multiplies by .4 for height
var height = width * 0.4;
//generates a random number to decide whether the confetti is blue, yellow, or red
var colorIdx = Math.ceil(Math.random() * 3);
var color = "red";
// Select random color for particle
switch(colorIdx){
case 1:
color = "yellow";
break;
case 2:
color = "blue";
break;
//add more colors here by doing this:
/*
case 3:
color = "colorname";
break
*/
// Make sure to style the class of your color name to set the background color
default:
color = "red";
}
// Create DOM object for particle
// and add particle to wrapper
$('').css({
"width" : width+"px",
"height" : height+"px",
"top" : -Math.random()*20+"%",
"left" : Math.random()*100+"%",
"opacity" : Math.random()+0.5,
"transform" : "rotate("+Math.random()*360+"deg)"
}).appendTo('.wrapper');
// Make confetti drop
drop(i);
}
function drop(x) {
$('.confetti-'+x).animate({
top: "100%",
left: "+="+Math.random()*15+"%"
}, Math.random()*2000 + 2000, function() {
reset(x);
});
}
function reset(x) {
// Reset opacity
$('.confetti-'+x).css('opacity','1');
$('.confetti-'+x).animate({
"top" : -Math.random()*20+"%",
"left" : "-="+Math.random()*15+"%"
}, 0, function() {
drop(x);
});
}
```
Now that you have all your code, it’s time to implement it!
**Section 2: Implementing Your Custom Confetti onto HubSpot**
To start, go ahead and open up your design manager.
We’re going to need to create 1 file and 1 custom module, let’s create the javascript file first.
Once the file is created, go into the file and put this tag in first
```auto
$(function(){
});
```
Then you can paste the JS from the demo in between the opening and closing brackets, like this
```auto
$(function(){
// ~ your javascript goes here ~
});
```
Now that you have all the code in, go ahead and save this out, then go to **actions \> get public url** in the top left corner
And copy the URL in the box, it should look something like this: **{{ get\_public\_template\_url(“url\_path/confetti-test.js”) }}**
Now you can go and create a new custom module,
In your custom module, at the top of the document you want to write
``
(Copy the url from above and past it in the quotations “”.)
Below this tag, you want to put your CSS
```auto
```
and finally, input your HTML,
``
Your whole file should look something like this
And that should do it, this should create the confetti module for you, now you can go ahead and put it on a page to test it out. [Here is my example.](https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=137828&style_id=hubspot-default-basic&tc_deviceCategory=desktop&template_layout_id=5046430751)
Let me know how this works out, or if you need any other clarification, hope it helps!
-- Ty
---
**Author:**  [@roisinkirby](https://community.hubspot.com/u/roisinkirby)\
**Post date:** [April 27, 2017, 9:39am UTC](https://community.hubspot.com/t/trying-to-create-a-confetti-effect-in-html/1751/6 "2017-04-27T09:39:08Z")
Thanks @Ty!
@Kkitchens for more substantial design updates, HubSpot offers access to [certified HubSpot agencies](https://app.hubspot.com/partner-directory/cos-design-partners) that specialize in HubSpot CMS or COS design, and more generalized website design services. HubSpot also offers [a free COS Designer Certification course](https://academy.hubspot.com/certification) to help you / your designer gain confidence in making these design edits yourself.