Templates
Introduction#
In order to simplify the learning curve, party.js provides templates to avoid needing to dive deep into emitters, modules and the like. Since they are the most "common" way of using the library, they are exported directly into the global party object, not into a sub-object.
Before you start using them, I'd suggest taking a look at sources, to figure out how to specify where to emit your particles from.
Reference#
Here you can find a list of all templates that are currently implemented, together with their configurations. If you have a suggestion for a template, feel free to open an issue for it!
tip
Templates return an Emitter object, which means that you can keep on customizing the effect beyond what's possible with the initial options!
Confetti#
The library's signature effect. Allows you to let confetti pop from any element or point in the document! This effect supports sources.
party.confetti(runButton, { /* ... */});
Configurationcount
- Type:
Variation<number> - Default:
range(20, 40)
The amount of confetti particles that should be emitted.
spread
- Type:
Variation<number> - Default:
40
The amount of spread that is applied to the emission angle. Note that the default angle points upwards.
speed
- Type:
Variation<number> - Default:
range(300, 600)
The initial speed that the confetti particles are emitted with.
size
- Type:
Variation<number> - Default:
skew(1, 0.2)
The initial size that the confetti particles are emitted with.
rotation
- Type:
Variation<Vector> - Default:
() => random.randomUnitVector().scale(180)
The initial rotation that the confetti particles are emitted with.
color
- Type:
Variation<Color> - Default:
() => Color.fromHsl(random.randomRange(0, 360), 100, 70)
The initial color that particles are emitted with.
shapes
- Type:
Variation<string | HTMLElement> - Default:
["square", "circle"]
The confetti shapes that should be emitted.
modules
- Type:
ModuleFunction[]
The module functions to pass to the emitter. By default, this contains module functions to animate scale and rotation.
Sparkles#
Allows you to emit sparkling sparks from any element or point in the document. This effect supports sources.
party.sparkles(runButton, { /* ... */});lifetime
- Type:
Variation<number> - Default:
range(1, 2)
How long the sparkles should stay alive before fading out.
count
- Type:
Variation<number> - Default:
range(10, 20)
The amount of sparkles that should be emitted.
speed
- Type:
Variation<number> - Default:
range(100, 200)
The speed at which the sparkles should be emitted at (in every direction).
size
- Type:
Variation<number> - Default:
range(0.5, 1.5)
The initial size that emitted sparkles should have.
rotation
- Type:
Variation<Vector> - Default:
() => new Vector(0, 0, random.randomRange(0, 360))
The initial rotation that sparkles should be emitted with. Note that the default only affects the z-axis.
color
- Type:
Variation<Color> - Default:
Color.fromHsl(50, 100, random.randomRange(55, 85))
The initial color that sparkles should be emitted with. By default a gold-ish color.
shapes
- Type:
Variation<string | HTMLElement> - Default:
"star"
The sparkle shapes that should be emitted.
modules
- Type:
ModuleFunction[]
The module functions to pass to the emitter. By default, this contains module functions to animate scale, rotation and opacity.