- 🪶 Lightweight - Only 2.5kb minified
- 📱 Fully Responsive - Works perfectly on all devices and screen sizes
- ⚡ Zero Dependencies - Pure JavaScript, no external libraries required
- 🎨 Highly Customizable - Easy to adjust snowfall density, speed, size, and more
- 🚀 Performance Optimized - Automatic cleanup and limited concurrent snowflakes
- 🔒 Safe to Use - Non-intrusive design, won't interfere with page interactions
- 💻 Cross-Browser Compatible - Works on all modern browsers
Add this single line of code to your website, right before the closing </body> tag:
<script src="https://ddosnotification.github.io/snow-theme/snow.js"></script>That's it! Your website now has beautiful falling snowflakes! ❄️
<!DOCTYPE html>
<html>
<head>
<title>My Winter Website</title>
</head>
<body>
<!-- Your website content -->
<!-- Add Snow Theme -->
<script src="https://ddosnotification.github.io/snow-theme/snow.js"></script>
</body>
</html>// Default configuration
SnowTheme.config = {
snowflakes: ['❄', '❅', '❆'], // Snowflake characters
density: 50, // Maximum number of snowflakes
interval: 200, // How often new snowflakes are created (ms)
minSize: 0.8, // Minimum snowflake size
maxSize: 1.5, // Maximum snowflake size
minDuration: 5, // Minimum fall duration (seconds)
maxDuration: 15, // Maximum fall duration (seconds)
wind: 20, // Wind effect strength
zIndex: 999999 // Layer level of snowflakes
}<script src="https://ddosnotification.github.io/snow-theme/snow.js"></script>
<script>
SnowTheme.config.density = 30;
SnowTheme.config.interval = 300;
SnowTheme.config.maxSize = 1.2;
</script><script src="https://ddosnotification.github.io/snow-theme/snow.js"></script>
<script>
SnowTheme.config.density = 100;
SnowTheme.config.interval = 100;
SnowTheme.config.maxSize = 2;
SnowTheme.config.wind = 50;
</script><script src="https://ddosnotification.github.io/snow-theme/snow.js"></script>
<script>
SnowTheme.config.snowflakes = ['❄', '●', '*', '+'];
SnowTheme.config.minSize = 1;
SnowTheme.config.maxSize = 2;
</script><script src="https://ddosnotification.github.io/snow-theme/snow.js"></script>
<script>
SnowTheme.config.minDuration = 10;
SnowTheme.config.maxDuration = 20;
SnowTheme.config.wind = 10;
</script>If snowflakes appear behind your content, adjust the z-index:
SnowTheme.config.zIndex = 1000000;Check out the live demo: https://ddosnotification.github.io/snow-theme/demo.html
Perfect for:
- 🎄 Holiday season websites
- ⛄ Winter-themed landing pages
- 🎁 Christmas promotions
- ❄️ Seasonal decorations for any web project
- ✅ Chrome (Latest)
- ✅ Firefox (Latest)
- ✅ Safari (Latest)
- ✅ Edge (Latest)
- ✅ Opera (Latest)
MIT License - feel free to use in both personal and commercial projects.
Contributions are welcome! Feel free to:
- Fork the repository
- Create your feature branch
- Submit a pull request
- Make sure the script is loaded after all other content
- Check if the z-index is high enough (increase if needed)
- Verify there are no JavaScript errors in the console
- Reduce the
densityvalue - Increase the
intervalvalue - Decrease the
maxSizevalue
If you find this project useful, please consider:
- Giving it a ⭐️ on GitHub
- Sharing it with friends and colleagues
Have questions? Found a bug? Please open an issue!
Made with ❄️ by ZeX