Trying to create a confetti effect in html.

[Kkitchens]

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..

[roisinkirby]

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 and stackoverflow: http://stackoverflow.com/questions/16322869/trying-to-create-a-confetti-effect-in-html5-how-do-i-get...

[Kkitchens]

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. 

[Ty · Accepted solution]

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. 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 (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, 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

<div class="wrapper"></div>

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

.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)

// 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 
  $('<div class="confetti-'+i+' '+color+'"></div>').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

$(function(){ 


});

Then you can paste the JS from the demo in between the opening and closing brackets, like this

$(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

<script src="{{ get_public_template_url("url_path/confetti-test.js") }}"></script>

(Copy the url from above and past it in the quotations "".)

Below this tag, you want to put your CSS

<style>
.wrapper{
  position: relative;
  min-height: 100vh;
}

[class |= "confetti"]{
  position: absolute;
}

.red {
  background-color: #dc2626;
}

.yellow {
  background-color: #ffbf00;
}

.blue {
  background-color: #6eaff3;
}
</style>

and finally, input your HTML,

<div class="wrapper"></div>

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.

Let me know how this works out, or if you need any other clarification, hope it helps!

-- Ty

[roisinkirby]

Thanks @Ty!

@Kkitchens for more substantial design updates, HubSpot offers access to certified HubSpot agencies that specialize in HubSpot CMS or COS design, and more generalized website design services. HubSpot also offers a free COS Designer Certification course to help you / your designer gain confidence in making these design edits yourself.

[roisinkirby]

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?