Home

Awesome

star-time-lapse

Build Status npm version

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

OptionDescriptionTypeDefault
elThe wrapper element. A sky element will be appended to it as a child element.Elementdocument.body
sumThe amount of stars in the sky. Pole star excluded.Number50
poleThe 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-
poleStarDraw a pole star or not.Booleantrue
radiusMinThe minimum radius of a star in px.Number3
radiusMaxThe maximum radius of a star in px.Number9
blinkWill the star blink or not.Booleantrue
runWill the animation start automatically when you create an instance.Booleantrue
clockwiseSpin clockwise or not.Booleantrue
arcThe percentage of the star's track remains in the sky as time flies. Range from 0 (no track) to 1 (a full circle track).Number0.8
durationHow long stars spin one turn in milliseconds.Number10000
topThe top CSS property of the sky element.Number0
leftThe left CSS property of the sky element.Number0
bottomThe bottom CSS property of the sky element.Number0
rightThe right CSS property of the sky element.Number0
backgroundThe background CSS property for the sky element.String'linear-gradient(#001, #232355)'
styleOther CSS properties applied on the sky element.Object{ 'z-index': -1, opacity: 0.8 }