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.

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

KeyTypeDescriptionRequiredDefault Value
typeStringRequired. Star type to use. The values are ‘dot’ or ‘line’true 
widthNumberCanvas width to setno800
heightNumberCanvas height to setno600
backgroundColorString|ArrayColor of the background, use string for a solid color, or an array of colors for a linear gradientno#ccc
quantityNumberNumber of stars to showno100
showFpsBooleanShow FPS on the top left screennofalse
speedNumberStar speedno0.5
starSizeNumber|ArrayUse number for fixed star size. Use [minSize, maxSize] value for random the size within the rangeno[0, 3] for type: dot, 100 for type: line

Must Read – JavaScript Library That Falling Particles With The Sparticles

Additional options for type: 'dot'

KeyTypeDescriptionRequiredDefault Value
directionNumberUse 360 degrees to set the directionno225
randomOpacityBoolean|ArrayIf true, the random star will get random opacity. Use array [minOpacity, maxOpacity] to limit the random opacitynofalse
starColorStringColor of the stars, you can use rgb or hex like css color.nowhite

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

Additional options for type: 'line'

KeyTypeDescriptionRequiredDefault Value
directionYNumberThe direction the star to move vertically (1 = to bottom, 0 = to top)no1
directionXNumberThe direction the star to move vertically (1 = to right, 0 = to left)no1
distanceXNumberDistance horizontally the star should reach atno0.1
frequencyNumberThe frequency of the star will be rotatedno10
slopeObjectThe quadratic curve coordinate will be applied to stars. Read MDNno{x: 1, y: 1}
starColorString|ArrayColor of the stars, use string for a solid color, or an array of colors for a linear gradientno[‘#fb00ff’, ‘#00dde0’]
spreadNumberThe spread level of the starsno1

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

Methods

NameParameterDescription
generateStar(amount)amount: numberThe 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

Read More –  A Vue Component For Dropping Confetti Animation Effect


See Demo And Download

Official Website(zuramai): Click Here

This superior jQuery/javascript plugin is developed by zuramai. For extra Advanced Usage, please go to the official website.

Share