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