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',
    blur: 5,
    glow: 1,
    isRound: false,
  },
  {
    color: '#ffffff',
    speed: 15,
    density: 2,
    size: 2,
    direction: 'up',
    blur: 1,
    glow: 2,
    isRound: false,
  },
  {
    color: '#ffffff',
    speed: 20,
    density: 1,
    size: 3,
    direction: 'up',
    blur: 0,
    glow: 5,
    isRound: false,
  }
];

<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
blur: number	Sets the amount of blur for every star
glow: number	Sets the glow radius in px
isRound: boolean	Set to true to make the stars round instead of square

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.