star-time-lapse

Using canvas to draw a star-filled sky with time-lapse effect. The color of the star is generated randomly by star-colors.

Demo

Visit the demo.

Install

npm install --save star-time-lapse

Usage

Include the javascript file in your Html and make a new StarTimeLapse:

<script src="/path/to/star-time-lapse.min.js"></script>
<script>
  const s = new StarTimeLapse({
    /* options */
    el: document.getElementById('sky'),
    sum: 30,
    pole: {
      x: 100,
      y: 100
    },
    duration: 12000
  });
</script>

API

methods

toggle()

To start or stop the animation. If run is set to false in options, you should manually call this function to start the animation.

options

Option	Description	Type	Default
el	The wrapper element. A sky element will be appended to it as a child element.	Element	document.body
sum	The amount of stars in the sky. Pole star excluded.	Number	50
pole	The polar coordinate. A valid value is an object with x and y as properties. For example, { x: 10, y: 10 }. Default to the center of the sky element.	Object	-
poleStar	Draw a pole star or not.	Boolean	true
radiusMin	The minimum radius of a star in px.	Number	3
radiusMax	The maximum radius of a star in px.	Number	9
blink	Will the star blink or not.	Boolean	true
run	Will the animation start automatically when you create an instance.	Boolean	true
clockwise	Spin clockwise or not.	Boolean	true
arc	The percentage of the star's track remains in the sky as time flies. Range from 0 (no track) to 1 (a full circle track).	Number	0.8
duration	How long stars spin one turn in milliseconds.	Number	10000
top	The top CSS property of the sky element.	Number	0
left	The left CSS property of the sky element.	Number	0
bottom	The bottom CSS property of the sky element.	Number	0
right	The right CSS property of the sky element.	Number	0
background	The background CSS property for the sky element.	String	'linear-gradient(#001, #232355)'
style	Other CSS properties applied on the sky element.	Object	{ 'z-index': -1, opacity: 0.8 }