Skip to content

D-Sketon/mouse-firework

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

mouse-firework

NPM License NPM Version NPM Bundle Size NPM Downloads jsDelivr hits (npm) Coverage Status

Demo


Fireworks effects appear when you click the mouse. Ideal for insertion in blogs and other such sites

Usage

Import

from npm

npm i mouse-firework --save

or just use it in your browser

<script src="https://cdn.jsdelivr.net/npm/mouse-firework@latest/dist/index.umd.js"></script>

Basic Usage

Just one line of code

firework(<options>)

e.g.

<script>
  firework({
    excludeElements: ["a"],
    particles: [
      {
        shape: "circle",
        move: ["emit"],
        easing: "easeOutExpo",
        colors: [
          "rgba(255,182,185,.9)",
          "rgba(250,227,217,.9)",
          "rgba(187,222,214,.9)",
          "rgba(138,198,209,.9)",
        ],
        number: 30,
        duration: [1200, 1800],
        shapeOptions: {
          radius: [16, 32],
        },
      },
    ],
  });
</script>

Options

interface FireworkOptions {
  excludeElements: string[];
  particles: {
    shape: "circle" | "star" | "polygon";
    move: Array<"emit" | "diffuse" | "rotate">;
    easing?: EasingTypes;
    colors: string[];
    number: number | [number, number];
    duration: number | [number, number];
    shapeOptions: CircleOptions | StarOptions | PolygonOptions;
    moveOptions?: EmitOptions | DiffuseOptions | RotateOptions;
  }[];
}

type CircleOptions = {
  radius: number | [number, number];
  alpha?: number | [number, number];
  lineWidth: number | [number, number];
};

type StarOptions = CircleOptions & {
  spikes: number | [number, number];
};

type PolygonOptions = CircleOptions & {
  sides: number | [number, number];
};

type EmitOptions = {
  emitRadius?: number | [number, number]; // default [50, 180]
  radius?: number | [number, number]; // default 0.1
  alphaChange?: boolean; // default false
  alpha?: number | [number, number]; // default 0
  alphaEasing?: EasingTypes; // default linear
  alphaDuration?: number | [number, number]; // default [600, 800]
};

type DiffuseOptions = {
  diffuseRadius?: number | [number, number]; // default [80, 160]
  lineWidth?: number | [number, number]; // for ring, default 0
  alpha?: number | [number, number]; // default 0
  alphaEasing?: EasingTypes; // default linear
  alphaDuration?: number | [number, number]; // default [600, 800]
};

type RotateOptions = {
  angle?: number | [number, number]; // default [-180, 180]
};

excludeElements(string[])

Fireworks are not triggered when these elements are clicked

It is recommended to exclude animations on elements like a and buttons tags

particles(Object)

Specific options of firework particles

shape("circle" | "star" | "polygon")

Shape of the particles

move(Array<"emit" | "diffuse" | "rotate">)

The way the particles move, emit indicates random movement from the center in all directions, diffuse indicates getting bigger and fading from the center

easing(EasingTypes, default = "linear")

see types for more information.

colors(string[])

Color pool, particles will be randomly selected from these colors, supports rgba and hexadecimal.

e.g.

colors: [
  "rgba(255,182,185,.9)",
  "rgba(250,227,217,.9)",
  "rgba(187,222,214,.9)",
  "rgba(138,198,209,.9)",
];
colors: ["#fff", "#000"];

number(number | [number, number])

Number of particles, support interval

duration(number | [number, number])

Duration of the motion of the particle, support interval

shapeOptions(CircleOptions | RingOptions)

CircleOptions

Initial properties of a circle

radius(number | [number, number])

Initial radius of the circle, support interval

alpha(number | [number, number], default = 1)

Initial alpha of the circle, support interval

lineWidth(number | [number, number])

If set, the shape changes to hollow

Initial lineWidth of the circle, support interval

StarOptions
spikes(number | [number, number])

Number of star spikes, support interval

PolygonOptions
sides(number | [number, number])

Number of polygon sides, support interval

moveOptions(optional)

EmitOptions
emitRadius(number | [number, number], default = [50, 180])

Emission radius, default 50-180px

radius(number | [number, number], default = 0.1)

The final radius of the particle, default 0.1px

alphaChange(boolean, default = false)

If or not the alpha is changed when emitting, default false.

alpha(number | [number, number], default = 0)

The final alpha at the end of the emission, default 0

alphaEasing(EasingTypes, default = "linear")

Easing function of the alpha, default linear, see types for more information.

alphaDuration(number | [number, number], default = [600, 800])

Duration of alpha changes during emission, default 600-800ms

DiffuseOptions
diffuseRadius(number | [number, number], default = [80, 160])

Diffusion radius, default 80-160px

lineWidth(number | [number, number], default = 0, only for ring)

The final lineWidth of the ring, default 0px

alpha(number | [number, number], default = 0)

The final alpha at the end of the diffusion, default 0

alphaEasing(EasingTypes, default = "linear")

Easing function of the alpha, default linear, see types for more information.

alphaDuration(number | [number, number], default = [600, 800])

Duration of alpha changes during diffusion, default 600-800ms

RotateOptions
angle(number | [number, number], default = [-180, 180])

Angle of rotation in degrees, default -180-180deg