/starback.js

Create a beautiful star falling background with starback.js

Primary LanguageJavaScript

Starbackjs Starbackjs Demo Night

Click for more examples

Starback.js

Getting Started

You can use starback.js directly with <script> tag or import syntax.

  • With <script> tag

    # Using CDN
    <script src="https://unpkg.com/starback@2.0.1/dist/starback.js"></script>
    
    # Using downloaded files
    <script src="PATH_TO_YOUR_DIST_FOLDER/starback.js"></script>
  • With import

    Install via NPM first:

    npm install starback

    and then

    import Starback from 'starback'

Example Usage

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

<script src="PATH_TO_DIST_FOLDER/starback.js"></script>
<script>
  const canvas = document.getElementById('canvas')
  const starback = new Starback(canvas, {
      type: 'dot',
      quantity: 100,
      direction: 225,
      backgroundColor: ['#0e1118', '#232b3e'],
      randomOpacity: true,
  })
</script>

You can check the more options in Options section

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 solid color, or array of colors for linear gradient no #ccc
quantity Boolean Number of stars to show 100 false
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

Additional options for type: 'dot'

Key Type Description Required Default Value
direction Number Use 360 degree to set the direction no 225
randomOpacity Boolean|Array If true, 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

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 reaching at no 0.1
frequency Number The frequency of star will be rotated no 10
slope Object The quadraticCurve coordinate that will be applied to stars. Read MDN no {x: 1, y: 1}
starColor String|Array Color of the stars, use string for solid color, or array of colors for linear gradient no ['#fb00ff', '#00dde0']
spread Number The spread level of the stars no 1

Methods

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

Example method usage: adding image to front

let starback = new Starback(canvas, options)

let mountainImage = new Image()
mountainImage.src = 'images/mountain.png'

mountainImage.onload = () => {
  starback.addToFront((ctx) => {
    ctx.drawImage(
      mountain,
      0,
      0,
      mountain.width,
      mountain.height,
      0,
      canvas.height - mountain.height,
      canvas.width,
      mountain.height
    )
  })
}

Contributing

You can contribute to this repository. See CONTRIBUTING.md

Donate

If you have used this library and it's useful for you, please consider to donate:

Ko-fi | Trakteer

License

This library is under MIT license.