Hey guys! Today, I’m going to show you how to add a snowfall effect to your website. It’s December, Christmas is around the corner, and it’s the perfect time to make your site look festive!
You can see the snow fall on this site. No winter snow fall in Nigeria but its on this site 🌚
To also add it on your site is super simple, with no stress, and no complicated setup, and you don’t need to change anything on your site. Just copy, paste, and boom- snow starts falling on your site.
Step 1:Copy the Code Below
This is the full code you need:
<!-- snowfall effect by sdavidprince.space --><style>.snowflake{position:fixed;top:-10px; color:inherit!important;font-size:10px;opacity:.7;animation:fall linear infinite;pointer-events:none}@keyframes fall{to{transform:translateY(100vh)}}</style><script>function createSnowflakes(){const numFlakes=50;const colors=['#ffffff','#d4f1f9','#e8f8ff'];for(let i=0;i<numFlakes;i++){const flake=document.createElement('div');flake.classList.add('snowflake');flake.innerHTML='❄';document.body.appendChild(flake);const size=Math.random()*10+10+'px';flake.style.left=Math.random()*100+'vw';flake.style.fontSize=size;flake.style.color=colors[Math.floor(Math.random()*colors.length)];flake.style.animationDuration=Math.random()*3+2+'s';flake.style.animationDelay=Math.random()*5+'s'}}
createSnowflakes()</script>Step 2:Add It to Your Site
For Blogger Users:
- Go toTheme>Edit HTML.
- Scroll down and paste the code inside the
<body>tag or right before the</body>tag. - Save your changes.
For Other Sites:
- Just copy-paste the code into your HTML file.
- Save and refresh your page.
Step 3:Customize(Optional)
- Want more snowflakes? Change this line:
const numFlakes=50;Increase 50 to 100 or more. - Prefer different colors? Update this part :
const colors=['#ffffff','#d4f1f9','#e8f8ff']; - Make it faster or slower? Adjust this line :
flake.style.animationDuration=Math.random()*3+2+'s';
That's it
Your site is now snowing without stress or drama. It looks festive, and fun, and keeps the vibe going for Christmas.
Check out this Light effect also
Merry Christmas in advance!🎄
