Press "Enter" to skip to content

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.

javascript falling stars effect, css twinkling stars, css stars background, background animation css, parallax star background in css, background image animation css

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

Official Website(zuramai): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published.