Create a Beautiful Star Falling Background with starback.js

starback.js is a javascript library for creating a highly customizable star-falling effect that can be used as a background for any container.

Confetti Falling Animation Effect In JavaScript | party.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 them 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 for Starbacks 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))

Must Read – Simulating Rendering Raindrops Falling On A Window | rainyday.js

Options

Key	Type	Description	Required	Default Value
type	String	Required. Star type to use. The values are ‘dot’ or ‘line’	true
width	Number	Canvas width to set	no	800
height	Number	Canvas height to set	no	600
backgroundColor	String\|Array	Color of the background, use string for a solid color, or an array of colors for a linear gradient	no	#ccc
quantity	Number	Number of stars to show	no	100
showFps	Boolean	Show FPS on the top left screen	no	false
speed	Number	Star speed	no	0.5
starSize	Number\|Array	Use number for fixed star size. Use [minSize, maxSize] value for random the size within the range	no	[0, 3] for `type: dot`, 100 for `type: line`

Must Read – JavaScript Library That Falling Particles With The Sparticles

Additional options for `type: 'dot'`

Key	Type	Description	Required	Default Value
direction	Number	Use 360 degrees to set the direction	no	225
randomOpacity	Boolean\|Array	If `true`, the random star will get random opacity. Use array [minOpacity, maxOpacity] to limit the random opacity	no	false
starColor	String	Color of the stars, you can use `rgb` or `hex` like css color.	no	white

Must Read – Calming and Peaceful Snowfall Effect Written in Pure JS/CSS

Additional options for `type: 'line'`

Key	Type	Description	Required	Default Value
directionY	Number	The direction the star to move vertically (1 = to bottom, 0 = to top)	no	1
directionX	Number	The direction the star to move vertically (1 = to right, 0 = to left)	no	1
distanceX	Number	Distance horizontally the star should reach at	no	0.1
frequency	Number	The frequency of the star will be rotated	no	10
slope	Object	The quadratic curve coordinate will be applied to stars. Read MDN	no	{x: 1, y: 1}
starColor	String\|Array	Color of the stars, use string for a solid color, or an array of colors for a linear gradient	no	[‘#fb00ff’, ‘#00dde0’]
spread	Number	The spread level of the stars	no	1

Must Read – JS Library To Help Add Snow Animations To Your Website | snow.js

Methods

Name	Parameter	Description
`generateStar(amount)`	amount: number	The number of stars that will be shown
`addToFront(callback(ctx))`	function(ctx: CanvasRenderingContext2D)	Add to the front of the falling star by the given context
`addToBehind(callback(ctx))`	function(ctx: CanvasRenderingContext2D)	Add to the back of the falling star by the given context