Add festive cheer to your website with simple, lightweight holiday overlays
// Add to your HTML
<script src="https://dadevmikey.github.io/The-Holiday-Library/ChristmasOverlay.js"></script>
<script src="https://dadevmikey.github.io/The-Holiday-Library/NewYearsOverlay.js"></script>
<script src="https://dadevmikey.github.io/The-Holiday-Library/HalloweenOverlay.js"></script>
// Enable snow effect
christmasOverlaySnow.enable({
snowflakeCount: 100,
snowflakeColor: 'white',
zIndex: 99999
});
// Enable fireworks effect
const fireworks = new FireworksOverlay();
fireworks.startAnimation();
// Enable Halloween effects
const halloween = new HalloweenOverlay();
halloween.startAnimation();
// Time-based scheduling (NEW!)
christmasOverlaySnow.enable({
startTime: '18:00', // 6 PM
endTime: '23:59' // Midnight
});
const scheduledFireworks = new FireworksOverlay({
startTime: '23:00', // 11 PM
endTime: '01:00' // 1 AM (overnight)
});
scheduledFireworks.startAnimation();
const scheduledHalloween = new HalloweenOverlay({
dateStart: '10-25', // Oct 25
dateEnd: '11-01' // Nov 1
});
scheduledHalloween.startAnimation();
Minimal impact on page load times
Adjust effects to match your site
Simple implementation with one line of code
Schedule effects based on user's local time
christmasOverlaySnow.enable();
christmasOverlaySnow.disable();
const fw = new FireworksOverlay();
fw.startAnimation();
fw.stopAnimation();
christmasOverlaySnow.enable({
startTime: '18:00',
endTime: '23:59'
});
const fw = new FireworksOverlay({
startTime: '23:00',
endTime: '01:00'
});
fw.startAnimation();
const hw = new HalloweenOverlay();
hw.startAnimation();
hw.stopAnimation();
const hw = new HalloweenOverlay({
dateStart: '10-25',
dateEnd: '11-01'
});
hw.startAnimation();