Flickering Grid Background Content
Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/omnedia/ngx-flickering-grid
A simple component library to create a container with an animated grid pattern background.
https://github.com/omnedia/ngx-flickering-grid
Last synced: about 1 month ago
JSON representation
A simple component library to create a container with an animated grid pattern background.
- Host: GitHub
- URL: https://github.com/omnedia/ngx-flickering-grid
- Owner: omnedia
- License: mit
- Created: 2024-08-26T13:52:28.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2024-09-25T08:57:58.000Z (4 months ago)
- Last Synced: 2024-11-02T01:46:25.927Z (2 months ago)
- Language: TypeScript
- Size: 7.81 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- trackawesomelist - ngx-flickering-grid (⭐0) - A simple component library to create a container with an animated grid pattern background. (Recently Updated / [Oct 01, 2024](/content/2024/10/01/README.md))
- awesome-angular - ngx-flickering-grid - A simple component library to create a container with an animated grid pattern background. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-flickering-grid - A simple component library to create a container with an animated grid pattern background. (Table of contents / Third Party Components)
README
# ngx-flickering-grid
`@omnedia/ngx-flickering-grid` is an Angular library that renders a dynamic flickering grid background with customizable square size, grid gaps, flicker behavior, and color. This component is perfect for adding a unique animated grid effect behind content in your Angular application.
## Features
- Dynamic flickering grid effect rendered on an HTML5 canvas.
- Customizable grid parameters, including square size, grid gap, flicker chance, and maximum opacity.
- Easy to integrate as a standalone component with optional viewport-based animation triggering.
## Installation
Install the library using npm:
```bash
npm install @omnedia/ngx-flickering-grid
```
## Usage
Import the `NgxFlickeringGridComponent` in your Angular module or component:
```typescript
import { NgxFlickeringGridComponent } from '@omnedia/ngx-flickering-grid';
@Component({
...
imports: [
...
NgxFlickeringGridComponent,
],
...
})
```
Use the component in your template:
```html
Your Content Here
```
## How It Works
- Dynamic Flickering Grid: The grid's squares will flicker at random intervals, controlled by the flickerChance input. You can adjust the size, gap, and opacity of the squares for different visual effects.
- Viewport Animation: The grid animation is only triggered when the component enters the viewport, enhancing performance by preventing unnecessary rendering.
- Global and Custom Styling: You can style the .om-flickering-grid container globally or apply custom styles using the styleClass input.
## API
```html
```
- `squareSize` (optional): Size of each square in pixels. Defaults to 4px.
- `gridGap` (optional): Gap between the squares in pixels. Defaults to 6px.
- `flickerChance` (optional): Probability of squares flickering, represented as a value between 0 and 1. Defaults to 0.3.
- `color` (optional): The color of the grid squares. Accepts any valid CSS color value. Defaults to '#6B7280'.
- `maxOpacity` (optional): Maximum opacity level of the squares. Accepts a value between 0 and 1. Defaults to 0.3.
- `styleClass` (optional): Custom CSS class to apply to the .om-flickering-grid container.
## Example
```html
```
This will create a flickering grid with larger squares, more pronounced gaps, and a blue color, while the content inside remains unaffected by the animation.
## 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.