Create a Beautiful Star Falling Background with starback.js

How to make use of it:

1. Install and import the starback.js with NPM.

# NPM
$ npm i starback --save

import Starback from 'starback'

2. Or load the starback.js from dist the folder.

<script src="dist/starback.js"></script>

3. Create a <canvas> factor on which the library renders the star falling impact.

<canvas id="canvas"></canvas>

4. Create a brand new occasion of the starback as follows:

const starback = new Starback(canvas, {
      // options here
})

5. Specify the variety of stars to generate.

starback.generateStar(30)

6. Customize the canvas.

const starback = new Starback(canvas, {
      // width/height of the canvas
      width: 800,
      height: 600,
      // background color of the canvas
      // also can be a color array for linear gradient
      backgroundColor: "#ccc",
})

7. Customize the star falling impact.

const starback = new Starback(canvas, {
      // animation speed
      speed: .5, 
      // an array of star colors
      starColor: ["#fb00ff", "#00dde0"], 
      // max number of stars
      maxStar: 200,
      // star size in px
      starSize: 100,
      // 1 = top-to-bottom, 2 = bottom-to-top
      directionY: 1, 
      // 1 = left-to-right, 2 = right-to-left
      directionX: 1,
      // distance of the current start X
      distanceX: .1, 
      // quadraticCurve coordinate that will be applied to stars
      slope: { x: 1, y: 1 },
      // frequency of star will be rotated
      frequency: 10,
      // spread level of stars
      spread: 1,
      // apply random opacity to stars
      randomOpacity: false,
      // show FPS
      showFps: false
})

8. More API strategies.

starback.addToFront(callback(ctx))
starback.addToBehand(callback(ctx))

Beautiful Star Falling Background, starback.js Plugin/Github, css background animation effects, css background animation examples

See Demo And Download