Skip to content

Latest commit

 

History

History
68 lines (47 loc) · 1.31 KB

README.md

File metadata and controls

68 lines (47 loc) · 1.31 KB

Particle Background

A lightweight JavaScript library that creates an animated particle background effect on an HTML canvas element.

Features

  • Smooth particle animations
  • Responsive canvas sizing
  • Customizable particle count
  • Random particle colors and movements
  • Easy to integrate

Installation

  1. Clone the repository or download the files
  2. Include the particleBackground.js in your project

Usage

import { ParticleBackground } from './particleBackground.js';

// Initialize the background
const background = new ParticleBackground('your-canvas-id');
background.init(100); // Set number of particles
background.start();   // Start animation

// Stop animation if needed
background.stop();

HTML Setup

<canvas id="your-canvas-id"></canvas>

Styling

Add this CSS to position your canvas:

#your-canvas-id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

Customization

You can customize the particle behavior by modifying:

  • Particle count: background.init(numberOfParticles)
  • Particle size: Modify size in Particle class
  • Particle speed: Adjust vx and vy calculations
  • Colors: Update generateColor() method

License

MIT License

Contributing

Feel free to open issues and submit pull requests.