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:
I'm dynamically generating the confettit divs
All of this is controlled through javascript
All confetti is styled through regular CSS.
*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 - 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
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:
I'm dynamically generating the confettit divs
All of this is controlled through javascript
All confetti is styled through regular CSS.
*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 - 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
@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.
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?