The Holiday Overlay

A simple JavaScript library to add festive holiday-themed overlays to your website.

Demos

• Full example: Live demo

• Christmas Overlay (Snow):
  Live Demo

• New Year's Overlay (Fireworks):
  Live Demo

Installation

Include the desired overlay library in your HTML file:

Christmas Overlay (Snow)

<script src="https://dadevmikey.github.io/christmas-overlay-snow/ChristmasOverlay.js"></script>

New Year's Overlay (Fireworks)

<script src="https://dadevmikey.github.io/the-holiday-library/NewYearsOverlay.js"></script>

Usage

Christmas Overlay (Snow)

Enable the overlay:

christmasOverlaySnow.enable();

Disable the overlay:

christmasOverlaySnow.disable();

Custom Options:

christmasOverlaySnow.enable({
  snowflakeCount: 100,       // Number of snowflakes (default: 50)
  snowflakeColor: 'red',     // Color of snowflakes (default: 'white')
  zIndex: 99999              // Z-index of the overlay (default: 9999)
});

New Year's Overlay (Fireworks)

Enable the overlay:

const fireworks = new FireworksOverlay();
fireworks.startAnimation();

Disable the overlay:

fireworks.stopAnimation();

Custom Options:

const fireworks = new FireworksOverlay({
  colors: ['#FF0000', '#00FF00', '#0000FF'], // Colors of fireworks (default: multicolored)
  particleCount: 100,                        // Number of particles per firework (default: 50)
  gravity: 0.05,                             // Simulated gravity (default: 0.02)
  speed: { min: 3, max: 8 },                 // Speed range of particles (default: { min: 2, max: 6 })
  radius: { min: 2, max: 5 },                // Radius range of particles (default: { min: 1, max: 3 })
  interval: 500,                             // Time between fireworks in ms (default: 1000)
  zIndex: 10000,                             // Z-index of the overlay (default: 9999)
  toggleButton: '#toggleFireworks',          // Button selector to toggle the overlay (optional)
});

Add a toggle button:

<button id="toggleFireworks">Toggle Fireworks</button>

In your script:

const fireworks = new FireworksOverlay({
  toggleButton: '#toggleFireworks', // Automatically links to this button
});

Contributing

Feel free to submit issues or pull requests to improve this library!

License

This project is licensed under the MIT License.