Beautiful Star Falling Background In JavaScript – starback.js

Preview:

Description:

A dependency-free JavaScript library for creating a highly customizable star falling effect that can be used as the background for any container.

How to use 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 folder.

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

3. Create a <canvas> element on which the library renders the star falling effect.

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

4. Create a new instance of the starback as follows:

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

5. Specify the number of stars to generate. That’s it.

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 effect.

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 methods.

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