Festive Magic: Christmas Snowfall & New Year’s Fireworks Effects

The Holiday Overlay is a simple and lightweight JavaScript library that allows you to add a Christmas snowfall effect and/or a New Year’s fireworks effect to your website.

You can use it to add a touch of holiday spirit to personal blogs, e-commerce sites, or corporate websites. For example, an e-commerce site could activate the snowfall effect throughout December, and then switch to the fireworks effect for New Year’s Eve and New Year’s Day, increasing user engagement and potentially boosting sales.

How to use it:

1. Load the JavaScript library in your HTML document.

<!-- Christmas Snowfall Effect -->
<script src="ChristmasOverlay.js"></script>
<!-- New Year's Fireworks Effect -->
<script src="NewYearsOverlay.js"></script>

2. Enable and customize the Christmas snowfall effect.

// Enable
christmasOverlaySnow.enable();
// Disable
christmasOverlaySnow.disable();
// options and defaults
christmasOverlaySnow.enable({
  
  // the number of snowflakes to generate
  snowflakeCount: 50,
  // the color of snowflakes
snowflakeColor: 'white',
 
  // CSS z-index
  zIndex: 9999
});

3. Enable and customize the New Year’s Fireworks effect.

// Initialize
const fireworks = new FireworksOverlay();
// Enable
fireworks.startAnimation();
// Disable
fireworks.stopAnimation();
// options and defaults
const fireworks = new FireworksOverlay({
  
  // an array of colors of the fireworks
  colors: ['#FF5733', '#FFC300', '#DAF7A6', '#C70039', '#900C3F', '#581845'],
  // the number of particles
  particleCount: 50,
  // simulated gravity affecting the particles
  gravity: 0.02,
  // animation speed
  speed: { min: 2, max: 6 },
  // radius range of particles
  radius: { min: 1, max: 3 },
  // animation interval in ms
  interval: 1000,
  // CSS z-index
  zIndex: 9999,
  // the selector of the trigger button
  toggleButton: null,
});