fancy-webgl-sparkles
Version:
PIXI.js library to add glitter particles with bokeh and special effects to your DOM elements
51 lines (49 loc) • 1.69 kB
Markdown
You can pass your options as a standard JSON object, list of available parameters are as follows:
```js
//colors to use for the sparkles
sparkleColor: ["#ffffff","#ffff00", "#e15ecb", "#32e187"],
//Rendering controls allow you to enable or disable bokeh, sparkles or stars
renderBokeh: false,
renderSparkles: true,
renderStars: true,
//sparkle particle count
sparkleScale: 50,
//simulation speed
speed: 2,
//minimum particle size
minSize: .05,
//maximum particle size
maxSize: .16,
//direction of sparkle particles, you can use up, down or both
direction: "both",
//If set to true allows particles to render
//outside from the element's bounding box
renderOutside: true,
//Array of colors for the bokeh effect
bokehColor: ["#ffffff","#ffff00"],
//This scale is proportional to the number of
//sparkles on the screen to avoid pollution
bokehScale: 1.5,
//Size multiplier to scale the bokeh, IE a scale of
//two means double the size
bokehSize: .7,
//This scale is proportional to the number of sparkles on the screen
starScale: 2,
//Size multiplier to scale the star particles,
//IE a scale of two means double the original size
starSize: 1,
//Scale of the boundary if renderOutside is set to true,
//IE a value of 2 would double the size of the area
//that is being rendered outside of the parent element boundaries.
boundaryScale: 1,
//If this setting is true the particles will
//start rendering as soon as the DOM is generated.
persistent: false
```
Use any combination of the properties above with the prefix sparkle-
```html
<div sparkle sparkle-renderBokeh="true" sparkle-starSize="0.3"></div>
```