https://github.com/dwmkerr/starfield

A nice starfield background using built using HTML and vanilla JavaScript as a learning exercise.
https://github.com/dwmkerr/starfield

html javascript learning space starfield

Last synced: 26 days ago
JSON representation

A nice starfield background using built using HTML and vanilla JavaScript as a learning exercise.

• Host: GitHub
• URL: https://github.com/dwmkerr/starfield
• Owner: dwmkerr
• Created: 2013-08-20T17:50:51.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2020-03-24T03:08:00.000Z (over 4 years ago)
• Last Synced: 2024-10-04T19:21:51.248Z (about 1 month ago)
• Topics: html, javascript, learning, space, starfield
• Language: HTML
• Homepage: https://dwmkerr.github.io/starfield/
• Size: 1.07 MB
• Stars: 51
• Watchers: 8
• Forks: 22
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
# Starfield

Starfield is a JavsScript class that displays an animated starfield in a `div` element.

Live Example: https://dwmkerr.github.io/starfield/

[![Starfield Screenshot](./images/starfield.gif "Starfield Screenshot")](https://dwmkerr.github.io/starfield/)

## Quickstart

Create a HTML `div` initialize a `Starfield` like this:

```js

var container = document.getElementById('container');

var starfield = new Starfield();

starfield.initialise(container);

starfield.start();

```

## Full-Code Example

_Ensure starfield.js file is in the same directory as the HTML file._

```html

    

        Starfield

        

            #container {

                width: 100%;

                height: 100%;

                position: absolute;

                left: 0px;

                top: 0px;

                z-index: -1;

            }

        

    

    

        

        


        

        

            //  Get the container and turn it into a starfield.

            var container = document.getElementById('container');

            var starfield = new Starfield();

            starfield.initialise(container);

            starfield.start();

        

    


```

## Configuration

You can configure the Starfield by setting the following properties on the class:

```js

var starfield = new Starfield();

starfield.stars = 200;      //  The number of stars.

starfield.minVelocity = 5;  //  The minimum star velocity in pixels per second.

starfield.maxVelocity = 15; //  The maximum star velocity in pixels per second.	

```

## Learning More

This code was created for **[Create a Starfield](codeproject.com/Articles/642499/Learn-JavaScript-Part-1-Create-a-Starfield)**, the first article of my _Learn JavaScript_ series on CodeProject.