๐ Confetti Generator ๐
Easily Generate random confetti with javascript and make your design look cooler
Have you ever seen that cool looking confetti on landing pages and above-the-fold content? We give you the power to create the same effect for free and without the hassle of having to design or code it from scratch.
-
Using
npm
npm install confetti-js --save
-
Direct download -> click here
-
The
classic
way<script src="node_modules/confetti-js/dist/index.min.js"></script>
-
ES6 module
// At the component you want to use confetti import "confetti-js";
After installing the plugin(the topic above), just call-it passing your options:
<canvas id="my-canvas"></canvas>
var confettiSettings = { target: 'my-canvas' };
var confetti = new ConfettiGenerator(confettiSettings);
confetti.render();
done!
Attribute | Description | Example value | Default value |
---|---|---|---|
target |
The Id tag of the canvas that will be used | 'my-canvas' | 'confetti-holder' |
max |
The number of props(confetti) to be rendered | 11 | 80 |
size |
Prop size | 1.8 | 1 |
animate |
If the confetti should fall | false | true |
clock |
The speed confetti fall | 50 | 25 |
props |
The type of props(confetti) that should be rendered. All the available are at the default. | ['circle', 'square'] | ['circle', 'square', 'triangle', 'line'] |
colors |
The color to be rendered on the confetti. By default, RGB format inside an array. | [[0,0,0], [255,255,255]] | [[165,104,246],[230,61,135],[0,199,228],[253,214,126]] |
width |
Canvas width | 960 | window size |
height |
Canvas height | 767 | window height |
Using the object generated by new ConfettiGenerator()
is pretty easy, there're just two main methods actually.
Method | Description |
---|---|
render |
Render the confetti at the config <canvas/> |
clear |
Clear the <canvas/> where the confetti where rendered |
var confetti = new ConfettiGenerator();
confetti.render();
//
confetti.clear();
You can use/hack/re-distribute/do whatever you want with this for free without having to credit the author or anything. Go on, just do it.
But if you take the time to contribute with the project it would be nice too, just saying :)
Special thanks to "Paper Matthew" on codepen for providing the starting point wich I fork to build this. You are awesome.
If this really helped you and warmed your kind heart, donations would be really appreciated ๐ค