View Code? Open in Web Editor NEW

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

License: MIT License

JavaScript 97.78% CSS 2.22%

nightsky's Introduction

NightSky

This WebComponent is inspired by the CodePen Parallax Star background in CSS from Saransh Sinha. Since this is a WebComponent it can be easily integrated in any React or Vue app. Check out the live demo.

Libraries
Usage
Documentation

Libraries

Approach Parallax Star background in CSS
Font Google Font Poppins
- Fetched via github.com/majodev/google-webfonts-helper
Feather Icons github.com/feathericons/feather
Github Corners github.com/YuskaWu/github-corner-element

Usage

Please checkout the demo. You can add the resources either locally or via a CDN (or as npm package):

<script src="https://unpkg.com/@h0rn0chse/night-sky/dist/bundle.min.js"></script>

You can add the background as WebComponent.

<night-sky
  id="nightSky"
  layers="4"
  density="30"
  velocity-x="60"
  velocity-y="60"
  star-color="#FFF"
  background-color="transparent"
>
</night-sky>

You have to set a size on the background.

#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.