https://github.com/h0rn0chse/nightsky

WebComponent for a night sky full of stars parallax background made with css only
https://github.com/h0rn0chse/nightsky

background css css-animation field night nightsky parallax sky star starfield webcomponent

Last synced: 2 days ago
JSON representation

WebComponent for a night sky full of stars parallax background made with css only

• Host: GitHub
• URL: https://github.com/h0rn0chse/nightsky
• Owner: H0rn0chse
• License: mit
• Created: 2022-01-08T19:24:04.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-03-09T10:38:25.000Z (7 months ago)
• Last Synced: 2024-09-21T02:31:54.549Z (6 days ago)
• Topics: background, css, css-animation, field, night, nightsky, parallax, sky, star, starfield, webcomponent
• Language: JavaScript
• Homepage: https://h0rn0chse.github.io/NightSky
• Size: 10.6 MB
• Stars: 12
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# NightSky

This WebComponent is inspired by the CodePen [Parallax Star background in CSS](https://codepen.io/saransh/pen/BKJun) from [Saransh Sinha](https://codepen.io/saransh). Since this is a WebComponent it can be easily integrated in any React or Vue app. Check out the [live demo](https://h0rn0chse.github.io/NightSky).

- [Libraries](#libraries)

- [Usage](#usage)

- [Documentation](#documentation)



    



## Libraries

- Approach [Parallax Star background in CSS](https://codepen.io/saransh/pen/BKJun)

- Font [Google Font Poppins](https://fonts.google.com/specimen/Poppins)

  - Fetched via [github.com/majodev/google-webfonts-helper](https://github.com/majodev/google-webfonts-helper)

- Feather Icons [github.com/feathericons/feather](https://github.com/feathericons/feather)

- Github Corners [github.com/YuskaWu/github-corner-element](https://github.com/YuskaWu/github-corner-element)

## Usage

Please checkout the [demo](https://h0rn0chse.github.io/NightSky). You can add the resources either locally or via a CDN (or as [npm package](https://www.npmjs.com/package/@h0rn0chse/night-sky)):

```html

```

You can add the background as WebComponent.

```html

```

You have to set a size on the background.

```css

#nightSky {

  width: 100vw;

  height: 100vh;

  overflow: hidden;

}

```

## Documentation

The WebComponent allows for some customizations via its attributes:

### layers

The amount of `layers` provided as positive integer.

### density

`density` describes the amount of stars in the first layer in screen with 192x1080px. Each additional layer doubles the amount of stars. It should be provided as positive integer.

### velocity-x

`velocity-x` describes the speed of the last layer. Each layer above moves with nth time of this speed. It should be

provided as positive or negative integer.

### velocity-y

`velocity-y` describes the speed of the last layer. Each layer above moves with nth time of this speed. It should be

provided as positive or negative integer.

### star-color

`star-color` is the color of the star. It should be provided as valid css color.

### background-color

`background-color` currently only supports the value `transparent` to disable the predefined background.