@omnedia/ngx-meteors
v2.0.0
Published
A simple component library to create a container with an animated background.
Downloads
98
Maintainers
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:
npm install @omnedia/ngx-meteors
Usage
Import the NgxMeteorsComponent
in your Angular module or component:
import { NgxMeteorsComponent } from '@omnedia/ngx-meteors';
@Component({
...
imports: [
...
NgxMeteorsComponent,
],
...
})
Use the component in your template:
<om-meteors
[meteorColor]="'#ffcc00'"
[meteorRotation]="'225deg'"
styleClass="custom-meteor-class"
>
<h1>Your content here</h1>
</om-meteors>
API
<om-meteors
[meteorColor]="meteorColor"
[meteorRotation]="meteorRotation"
styleClass="your-custom-class"
>
<ng-content></ng-content>
</om-meteors>
- 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
<om-meteors
[meteorColor]="'#00ffcc'"
[meteorRotation]="'180deg'"
styleClass="meteor-background"
>
<div class="content">This is a meteor background effect</div>
</om-meteors>
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.
.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.