- 🪶 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