confetti-bubble
v2.0.10
Published
Create random confetti bubbles
Readme
confetti-bubble
Add random configurable confetti bubbles to your project
Confetti Bubble Library:
- No Dependencies
- Small size: 8.0K confettiBubble.js
- Configurable
- Easy to integrate with examples
Demo
http://www.rellster.com/confetti-bubble
Installation
npm i confetti-bubble
yarn add confetti-bubbleDefault Configuration
| Property | Default Value | Description | | -------------------------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | cf-interval-max-bubble-size-in-percentage | 6 | Maximum bubble size in percentage | | cf-interval-min-bubble-size-in-percentage | 2 | Minimum bubble size in percentage | | cf-interval-max-journey-duration-in-sec | 250 | Maximum time in milliseconds in which a bubble returns to its initial position | | cf-interval-min-journey-duration-in-sec | 200 | Minimum time in milliseconds in which a bubble returns to its initial position | | cf-interval-max-journey-paths-for-one-bubble | 20 | Maximum number of paths a bubble can take per journey | | cf-interval-min-journey-paths-for-one-bubble | 10 | Minimum number of paths a bubble can take per journey | | cf-number-of-bubbles | 100 | Total number of bubbles | | cf-svg-key-spline | "1 0.7 0.7 1" | Sort of determines one bubble's movement, ex. ease-in/out. More here: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/keySplines | | cf-colors | "#8F2D56;#c0fff4;..etc" | Colors of bubbles. Usage example: cf-colors="#8F2D56;#c0fff4;" |
API
confettiBubble.generate(targetElement: HTMLElement, config: Config )
Generates the bubbles in targetElement based on passed config
targetElement: HTMLElement
- element holder in which bubbles will be generated
config: Config
- is optional, not passing one will result in the usage of the default one
// Config example
const config = {
intervalMaxBubbleSizeInPercentage: 30,
intervalMinBubbleSizeInPercentage: 10,
intervalMaxJourneyDurationInSec: 150,
intervalMinJourneyDurationInSec: 100,
intervalMaxJourneyPathsForOneBubble: 15,
intervalMinJourneyPathsForOneBubble: 10,
numberOfBubbles: 100,
cfSvgKeySpline: "1 0.7 0.7 1",
colors: ["#8F2D56", "#D72483", "#ffffff"],
}Usage with HTML Tags:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Confetti Bubbles</title>
</head>
<body style="background:#0080efb3;margin:0">
<section style="border: white 10px solid;
height:500px;
margin: 100px auto 0 auto;
position:relative;
resize: both;
overflow: auto;
width:500px;">
<div id="target-element"
cf-interval-max-bubble-size-in-percentage="6"
cf-interval-min-bubble-size-in-percentage="2"
cf-interval-max-journey-duration-in-sec="250"
cf-interval-min-journey-duration-in-sec="200"
cf-interval-max-journey-paths-for-one-bubble="20"
cf-interval-min-journey-paths-for-one-bubble="10"
cf-number-of-bubbles="100"
cf-svg-key-spline="1 0.7 0.7 1"
cf-colors="#8F2D56;#D72483;#ffffff;#0496FF;#006BA6;#DBD9DB;#F7F7F2;#006CCE;#399E5A;#282828;#B10DC9;#F012BE;#85144b;#FF4136;#FF851B;#FFDC00;#01FF70;#2ECC40;#3D9970;#39CCCC;#0074D9;#001f3f;#ff545e;#5e40b2;#8051cf;#dbeeff;#0c6483;#97ffff;#c0fff4">
</div>
</section>
</body>
<script src="../../dist/confettiBubble.js"></script>
<script>
const targetElement = document.getElementById("target-element");
window.confettiBubble.generate(targetElement);
</script>
</html>Usage with Config:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Confetti Bubbles</title>
</head>
<body style="background:#0080efb3;margin:0">
<section style="border: white 10px solid;
height:500px;
margin: 100px auto 0 auto;
position:relative;
resize: both;
overflow: auto;
width:500px;">
<div id="target-element"></div>
</section>
</body>
<script src="../../dist/confettiBubble.js"></script>
<script>
const targetElement = document.getElementById("target-element");
const config = {
intervalMaxBubbleSizeInPercentage: 6,
intervalMinBubbleSizeInPercentage: 2,
intervalMaxJourneyDurationInSec: 250,
intervalMinJourneyDurationInSec: 200,
intervalMaxJourneyPathsForOneBubble: 20,
intervalMinJourneyPathsForOneBubble: 10,
numberOfBubbles: 400,
svgKeySpline: "1 0.7 0.7 1",
colors: ["#8F2D56", "#D72483"],
};
window.confettiBubble.generate(targetElement, config);
</script>
</html>Usage React
"use strict";
import React from "react";
import confettiBubble from "confetti-bubble";
export default class ConfettiBubbleWrapper extends React.Component {
constructor(props) {
super(props);
this.confettiBubbleWrapperRef = React.createRef();
}
componentDidMount() {
const colors = [
"#8F2D56",
"#D72483",
"#ffffff",
"#0496FF",
"#006BA6",
"#DBD9DB",
"#F7F7F2",
"#006CCE",
"#399E5A",
"#282828",
"#B10DC9",
"#F012BE",
"#85144b",
"#FF4136",
"#FF851B",
"#FFDC00",
"#01FF70",
"#2ECC40",
"#3D9970",
"#39CCCC",
"#0074D9",
"#001f3f",
"#ff545e",
"#5e40b2",
"#8051cf",
"#dbeeff",
"#0c6483",
"#97ffff",
"#c0fff4",
];
const config = {
intervalMaxBubbleSizeInPercentage: 6,
intervalMinBubbleSizeInPercentage: 2,
intervalMaxJourneyDurationInSec: 250,
intervalMinJourneyDurationInSec: 200,
intervalMaxJourneyPathsForOneBubble: 20,
intervalMinJourneyPathsForOneBubble: 10,
numberOfBubbles: 100,
svgKeySpline: "1 0.7 0.7 1",
colors: colors,
};
confettiBubble.generate(this.confettiBubbleWrapperRef.current, config);
}
render() {
return (
<section
style={{
height: "500px",
position: "relative",
width: "100%",
margin: "auto",
}}
>
<div ref={this.confettiBubbleWrapperRef}>
<h1
style={{
textAlign: "center",
fontSize: "80px",
color: "white",
}}
>
Wonderful
</h1>
</div>
</section>
);
}
}Issues
Found a bug? Create an issue on GitHub.
https://github.com/relumesaros/confetti-bubble/issues
License
This project is licensed under the MIT License - see the LICENSE file for details