Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/omnedia/ngx-meteors
A simple component library to create a container with an animated background.
https://github.com/omnedia/ngx-meteors
Last synced: 4 months ago
JSON representation
A simple component library to create a container with an animated background.
- Host: GitHub
- URL: https://github.com/omnedia/ngx-meteors
- Owner: omnedia
- License: mit
- Created: 2024-08-16T14:49:29.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2024-08-26T18:37:07.000Z (5 months ago)
- Last Synced: 2024-09-26T19:21:13.348Z (4 months ago)
- Language: SCSS
- Size: 5.86 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- trackawesomelist - ngx-meteors (⭐0) - An Angular library that adds a mesmerizing meteor shower animation effect to your components. (Recently Updated / [Oct 01, 2024](/content/2024/10/01/README.md))
- awesome-angular - ngx-meteors - An Angular library that adds a mesmerizing meteor shower animation effect to your components. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-meteors - An Angular library that adds a mesmerizing meteor shower animation effect to your components. (Table of contents / Third Party Components)
README
# ngx-meteors
`@omnedia/ngx-meteors` is an Angular library that adds a mesmerizing meteor shower animation effect to your components. The meteors fly across the screen in a configurable direction and color, creating a dynamic and engaging background effect for your Angular applications.
## Features
- Meteor shower animation with customizable rotation and color.
- Flexible configuration to fit the style and theme of your application.
- Lightweight and easy to integrate as a standalone component.
## Installation
Install the library using npm:
```bash
npm install @omnedia/ngx-meteors
```
## Usage
Import the `NgxMeteorsComponent` in your Angular module or component:
```typescript
import { NgxMeteorsComponent } from '@omnedia/ngx-meteors';
@Component({
...
imports: [
...
NgxMeteorsComponent,
],
...
})
```
Use the component in your template:
```html
Your content here
```
## API
```html
```
- meteorColor (optional): The color of the meteors. Accepts any valid CSS color value (e.g., #ffcc00, rgba(255, 204, 0, 1)).
- meteorRotation (optional): The rotation angle for the meteors, determining the direction of their movement. Accepts any valid CSS rotation value (e.g., '225deg').
- styleClass (optional): A custom CSS class to apply to the component's wrapper element for additional styling.
## Example
```html
This is a meteor background effect
```
This will create a meteor shower effect with cyan-colored meteors moving in a downward direction.
## Styling
To further customize the appearance of the meteors or the container, use the styleClass input to apply your own CSS classes.
```css
.meteor-background {
background-color: #000;
height: 100vh;
position: relative;
}
.content {
position: relative;
z-index: 1;
color: white;
text-align: center;
padding-top: 50px;
}
```
## 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.