Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/omnedia/ngx-particles
A simple component library to create a container with an animated background.
https://github.com/omnedia/ngx-particles
Last synced: about 1 month ago
JSON representation
A simple component library to create a container with an animated background.
- Host: GitHub
- URL: https://github.com/omnedia/ngx-particles
- Owner: omnedia
- License: mit
- Created: 2024-08-20T12:26:44.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2024-09-25T09:02:26.000Z (4 months ago)
- Last Synced: 2024-11-16T06:13:20.122Z (about 2 months ago)
- Language: TypeScript
- Size: 11.7 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- trackawesomelist - ngx-particles (⭐0) - An Angular library that provides a dynamic and interactive particle animation effect. The particles react to mouse movements, creating a visually engaging and customizable background for your Angular components. (Recently Updated / [Oct 01, 2024](/content/2024/10/01/README.md))
- awesome-angular - ngx-particles - An Angular library that provides a dynamic and interactive particle animation effect. The particles react to mouse movements, creating a visually engaging and customizable background for your Angular components. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-particles - An Angular library that provides a dynamic and interactive particle animation effect. The particles react to mouse movements, creating a visually engaging and customizable background for your Angular components. (Table of contents / Third Party Components)
README
# ngx-particles
`@omnedia/ngx-particles` is an Angular library that provides a dynamic and interactive particle animation effect. The particles react to mouse movements, creating a visually engaging and customizable background for your Angular components.
## Features
- Interactive particle animation that responds to mouse movements.
- Customizable particle quantity, size, color, and motion dynamics.
- Lightweight and easy to integrate as a standalone component.
## Installation
Install the library using npm:
```bash
npm install @omnedia/ngx-particles
```
## Usage
Import the `NgxParticlesComponent` in your Angular module or component:
```typescript
import { NgxParticlesComponent } from '@omnedia/ngx-particles';
@Component({
...
imports: [
...
NgxParticlesComponent,
],
...
})
```
Use the component in your template:
```html
Your content here
```
## API
```html
```
- `quantity` (optional): The number of particles. Defaults to 100.
- `size` (optional): The size of the particles. Defaults to 0.4.
- `circleColor` (optional): The color of the particles. Accepts any valid CSS color value (e.g., '#ff69b4', 'rgba(255, 105, 180, 0.8)'). Default is white
- `staticity` (optional): Controls the responsiveness of the particles to the mouse. Higher values reduce particle movement. Defaults to 50.
- `ease` (optional): Controls the smoothness of the particle movement. Lower values increase the speed of the transition. Defaults to 50.
- `particleSpeed` (optional): Controls the speed of the particle movement. Higher values increase the speed of the particles. Defaults to 1.
- `vx` (optional): Horizontal velocity of the particles. Defaults to 0.
- `vy` (optional): Vertical velocity of the particles. Defaults to 0.
- `styleClass` (optional): A custom CSS class to apply to the particle container.
## Example
```html
Interactive Particle Background
```
This example creates a particle background with 200 particles, cyan-colored, and with custom motion dynamics. The particles will move more fluidly in response to mouse movements.
## Styling
To further customize the appearance of the particles or the container, use the styleClass input to apply your own CSS classes.
```css
.particles-background {
background-color: #000;
position: relative;
height: 100vh;
overflow: hidden;
}
.content {
position: relative;
z-index: 1;
color: white;
text-align: center;
padding-top: 50px;
}
```
This will create a fullscreen particle background with a centered text content overlay.
## Contributing
Contributions are welcome. Please submit a pull request or open an issue to discuss your ideas.
## License
This project is licensed under the MIT License.