ngx-parallax-stars

Angular library to create beautiful stars with parallax effect.

Demo

https://derstimmler.github.io/ngx-parallax-stars/

Installation

Available on npm.

npm install ngx-parallax-stars

Usage

Just import the standalone NgxParallaxStarsComponent into the component you want to use it in.

import NgxParallaxStarsComponent from 'ngx-parallax-stars';

@Component({
  selector: 'app-main',
  standalone: true,
  imports: [
    CommonModule,
    NgxParallaxStarsComponent,
  ],
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss']
})
export class MainComponent {

}

Then add the following to the template:

<ngx-parallax-stars></ngx-parallax-stars>

The component behaves like any other block element, so you can easily change its dimensions and styles with CSS.

Configuration

Star layers

The parallax effect is created by multiple layers of stars moving at different speeds.

By default, the component renders some predefined layers. You can override these with your own custom layers as follows:

layers: StarLayer[] = [
  {
    color: '#ffffff',
    speed: 10,
    density: 7,
    size: 1,
    direction: 'up',
  },
  {
    color: '#ffffff',
    speed: 15,
    density: 2,
    size: 2,
    direction: 'up',
  },
  {
    color: '#ffffff',
    speed: 20,
    density: 1,
    size: 3,
    direction: 'up',
  }
];

<ngx-parallax-stars [layers]="layers"></ngx-parallax-stars>

| Property | Description | |---------------------|----------------------------------------------------------------------------------------------------------------------------------------| | color: string | Sets the color of the stars. All colors you can use in CSS should work e.g. white, #ffffff, rgb(255,255,255), hsl(0, 0%, 100%) | | speed: number | Sets the moving speed of the stars | | density: number | Specifies how many stars should be rendered per 100 by 100px area | | size: number | Specifies the size of every star in px | | direction: string | Determines the moving direction. Possible values are: up, down, left, right |

When you update the layers input binding, the component will automatically be re-rendered.

Responsive mode

If responsive mode is enabled, the component will automatically be re-rendered when its size changes. This is important if the component grows after the initial render. Otherwise, the extra space will be empty.

Responsive mode is enabled by default, but can be disabled as follows:

<ngx-parallax-stars [responsive]="false"></ngx-parallax-stars>

Development

Install dependencies with: pnpm install

Run pnpm demo to run the demo app on a local development server. You can access it on http://localhost:4200.

Run pnpm test to test all projects.

Run pnpm lint to lint all projects.

Run pnpm build to build all projects. You can find the output under /dist.

Since it's a nx workspace you can use the common nx commands for everything else.

Shout-Out

This library is inspired by this codepen.