Just A Nerds Christmas Snow
It's the Holiday season!
I wanted to add a bit of flair to the site for the holidays, and what better way than some snow? Snowfall has always been one of my favorite things about winter. The cold and silent days blanketed in a sound muffling slurry has been my contemplative time of the year for as long as I can remember. Being back in the deserts of Nevada, I only get these moments now when the mountains open up for snowboarding. Coast through the powder and find a nice place to rest and think. For those that don't get snow this time of year and don't have the opportunity to visit it nearby, come visit JustANerds.Site at the home page for some soothing snow (and possibly some public domain Christmas music). What I really want to do with this post is explain how you can also get this simple snow effect on your own site!
Using some basic CSS and JavaScript with some snowflake .PNG images you can have this effect up in no time (Just copy my code and apply it properly! Also available on GitHub)
Modifying your style.css
You only need a few extra classes in your CSS. Whether you use a style.css for global styling, or apply it directly in your site with the HTML <style> elements, just take the below and apply it somewhere.
.snowflakes {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 1; /* Adjust the z-index to ensure snowflakes are above other elem>
width: 100%;
height: 100%;
background: transparent;
animation: snowfall linear infinite;
}
@keyframes snowfall {
from {
transform: translateY(-100vh);
}
to {
transform: translateY(100vh);
}
}
.snowflake {
position: absolute;
width: 30px;
height: 30px;
background-size: contain;
background-repear: no-repeat;
opacity: 0.8;
animation: snowflake-fall-rotate 10s linear infinite;
}
@keyframes snowflake-fall-rotate {
0% {
transform: translateY(-100vh) rotate(0deg);
}
100% {
transform: translateY(100vh) rotate(360deg);
}
}
Applying the Javascript
Now, you could put this is a .js file somewhere on your site's server, but I chose to apply it directly to my home page. There is some pro's and con's to both however. Pro's of creating a script file on the server is you cannot view it in your browsers web inspector. Con's are, you cannot view it from your browser web inspector. I want my script viewable, because I like others to take what I create and do what they want with it. But this also opens the possibility of finding ways into your site. Being a single person running this, and nothing on the server to hide, I do not mind it being viewable. For me, this was as simple as logging into my WonderCMS site as admin, and applying the script in my homepages HTML using a <script> element.
Remember its a good idea to add scripts below all your main content
const snowflakeVectors = [
'https://justanerds.site/data/files/snowflake1.png',
'https://justanerds.site/data/files/snowflake2.png',
'https://justanerds.site/data/files/snowflake3.png',
'https://justanerds.site/data/files/snowflake4.png',
'https://justanerds.site/data/files/snowflake5.png',
'https://justanerds.site/data/files/snowflake6.png',
'https://justanerds.site/data/files/snowflake7.png',
'https://justanerds.site/data/files/snowflake8.png',
'https://justanerds.site/data/files/snowflake9.png'
];
document.addEventListener('DOMContentLoaded', function() {
const snowflakesContainer = document.querySelector('.snowflakes');
for (let i = 0; i < 50; i++) {
const snowflake = document.createElement('div');
snowflake.className = 'snowflake';
snowflake.style.left = Math.random() * 100 + 'vw';
snowflake.style.animationDuration = (Math.random() * 4 + 3) + 's';
const randomSize = Math.floor(Math.random() * (40 - 20 + 1)) + 20;
snowflake.style.width = randomSize + 'px';
snowflake.style.height = randomSize + 'px';
const randomSnowflakeVector = snowflakeVectors[Math.floor(Math.random() * snowflakeVectors.length)];
snowflake.style.backgroundImage = `url('${randomSnowflakeVector}')`;
snowflakesContainer.appendChild(snowflake);
}
});
Script breakdown.
You can download the snowflake pack HERE.
I downloaded it as an .SVG and inside GIMP broke it into individual 180px x 180px .PNG images. I then uploaded them as 'snowflake1.png', 'snowflake2.png', 'snowflake3.png', and so on from the WonderCMS admin panel.
const snowflakeVectors
This array holds all the individual snowflake images.
for (let 1 = 0; i < 50; i++)
Decides how many snowflakes should fill the screen using a forloop.
const snowflake = document.createElement('div');
Created a new <div> element for each snowflake.
snowflake.className = 'snowflake';
Creates the classname for the new <div> elements.
snowflake.style.left = Math.random() * 100 + 'vw';
Ensures the entire width of the screen is used and randomly picks a spot for each snowflake to fall.
snowflake.style.animationDuration = (Math.random() * 4 + 3) + 's';
Set's the 'speed' that each snowflake falls. Modify "(Math.random() * 4 + 3) + 's';" numbers to increase or decrease the speed. the 4 is the constant, and the 3 is the variable. So at minimum it will take 4 seconds, and max 7 seconds (4+3=7).
const randomSize = Math.floor(Math.random() * (40 - 20 + 1)) + 20;
snowflake.style.width = randomSize + 'px';
snowflake.style.height = randomSize + 'px';
Dynamically sets the overall size of the snowflakes. Max being 40px and minimum being 20px
const randomSnowflakeVector = snowflakeVectors[Math.floor(Math.random() * snowflakeVectors.length)];
snowflake.style.backgroundImage = `url('${randomSnowflakeVector}')`;
Take all the above code and creates our uniquely sized snowflakes.
snowflakesContainer.appendChild(snowflake);
Sets the snowflakes into the <div> elements to complete the script.
Conclusion
Will all that applied correctly, (and images cut correctly) you can have an awesome snowflake effect. If you arent interested in having fancy snowflakes, you could omit the JavaScript array with the .PNG's and instead add background: fff; to your .snowflake CSS element. Have fun with this, mess with it and make it your own unique winter wonderland.