Confetti-bubble NPM

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

Default 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>
    );
  }
}