Let it Snow: Adding a Falling-Snow Effect to Your Eleventy Website
As you can see, I’m getting my priorities in order. Here’s how I added a falling-snow effect to my website.
I’m pretty happy with the look and feel of my website but, looking
around the indieweb, I see so many creative and fun websites with
neat animations and interactive features. Reader, I was jealous; I
wanted my website to be more fun. The
flying toasters just weren’t
enough anymore. My first thought was to add a midi-player. I spent a
few hours in a hyperfocus-hole digging up all sorts of fun midi
tracks, from Kate Bush to Rammstein. I was excited. But
reality hit me like a truck when I learned that HTML5 dropped
support for midi files. This meant that it was either going to be a
monumental pain in the arse to implement my midi payer, or I was
going to have to rely on some pretty heavy
dependencies. And look, I know typing npm install blah doesn’t
seem like a big deal to some folk but, where I can, I would really
rather avoid summoning from the ether giant directories full of code
that I don’t understand for my little website. To add to that,
provided you don’t want your midi files played by some dead-simple
synth sound, there’s the business of soundfonts: gigabytes of audio
samples from mysterious origins which you have to host yourself if
you don’t want
Google’s servers
tracking all of your visitors. At least one popular soundfont also
seems to be a bit of a mystery; where does SGM Plus come from? No
one seems to know. How is it licensed? I sure couldn’t find an
answer.
So, yea, I gave up on that idea and decided to implement a falling-snow effect instead. Here’s how I did it.
Humble beginnings #
I set out to look for an implementation with as little JavaScript as
possible. I have nothing against JavaScript, but I figure it’s best
to try trimming your toenails with clippers before reaching for a
chainsaw. The search led me to a codepen with
this HTML and CSS-only solution. I tidied up the formatting, stripped out anything unnecessary,
and put together my include, _includes/weather.njk:
<!-- weather -->
<!-- Based on https://codepen.io/codeconvey/pen/xRzQay -->
{# This include causes a symbol (text, emoji, et cetera; from metadata.weatherSymbol) to fall from the top of the viewport like snow. #}
<style>
.fallingObject {
color: #fff;
font-size: 1em;
font-family: Arial;
pointer-events: none;
text-shadow: 0 0 1px #000;
}
@keyframes fallingObjects-fall {
0% {
top: -10%;
}
100% {
top: 100%;
}
}
@keyframes fallingObjects-shake {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(80px);
}
100% {
transform: translateX(0px);
}
}
.fallingObject {
position: fixed;
top: -10%;
z-index: 9999;
user-select: none;
cursor: default;
animation-name: fallingObjects-fall, fallingObjects-shake;
animation-duration: 10s, 3s;
animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite;
animation-play-state: running, running;
}
.fallingObject:nth-of-type(0) {
left: 1%;
animation-delay: 0s, 0s;
& > div {
transform: rotate(45deg);
}
}
.fallingObject:nth-of-type(1) {
left: 10%;
animation-delay: 1s, 1s;
& > div {
transform: rotate(10deg);
}
}
.fallingObject:nth-of-type(2) {
left: 20%;
animation-delay: 6s, 0.5s;
& > div {
transform: rotate(60deg);
}
}
.fallingObject:nth-of-type(3) {
left: 30%;
animation-delay: 4s, 2s;
& > div {
transform: rotate(84deg);
}
}
.fallingObject:nth-of-type(4) {
left: 40%;
animation-delay: 2s, 2s;
& > div {
transform: rotate(267deg);
}
}
.fallingObject:nth-of-type(5) {
left: 50%;
animation-delay: 8s, 3s;
& > div {
transform: rotate(200deg);
}
}
.fallingObject:nth-of-type(6) {
left: 60%;
animation-delay: 6s, 2s;
& > div {
transform: rotate(20deg);
}
}
.fallingObject:nth-of-type(7) {
left: 70%;
animation-delay: 2.5s, 1s;
& > div {
transform: rotate(78deg);
}
}
.fallingObject:nth-of-type(8) {
left: 80%;
animation-delay: 1s, 0s;
& > div {
transform: rotate(3120deg);
}
}
.fallingObject:nth-of-type(9) {
left: 90%;
animation-delay: 3s, 1.5s;
& > div {
transform: rotate(123deg);
}
}
</style>
<div class="fallingObjects" id="weather" aria-hidden="true">
<div class="fallingObject">
<div>{{ metadata.weatherSymbol }}</div>
</div>
<div class="fallingObject">
<div>{{ metadata.weatherSymbol }}</div>
</div>
<div class="fallingObject">
<div>{{ metadata.weatherSymbol }}</div>
</div>
<div class="fallingObject">
<div>{{ metadata.weatherSymbol }}</div>
</div>
<div class="fallingObject">
<div>{{ metadata.weatherSymbol }}</div>
</div>
<div class="fallingObject">
<div>{{ metadata.weatherSymbol }}</div>
</div>
<div class="fallingObject">
<div>{{ metadata.weatherSymbol }}</div>
</div>
<div class="fallingObject">
<div>{{ metadata.weatherSymbol }}</div>
</div>
<div class="fallingObject">
<div>{{ metadata.weatherSymbol }}</div>
</div>
<div class="fallingObject">
<div>{{ metadata.weatherSymbol }}</div>
</div>
</div>
<!-- /weather -->
I added this include in my base layout, after the footer, just
before the the closing </body> tag. Beyond
cleanup, I made the following changes:
-
I replaced the snowflakes in the example with
{{ metadata.weatherSymbol }}so that I can easily change the symbol that falls (that’s right folks, this’ll do more than just snowflakes!). - I added a random amount of rotation to each object.
- I changed the class names from anything snowflake related because I’m a pedant.
Now all we need to do is make sure
{{ metadata.weatherSymbol }} exists and we should be
cooking with gas. To _data/metadata.js I added:
weatherSymbol: "🍁",; a falling leaf for
autumn.
Settings #
Now we have our falling-snow falling leaf effect working but,
as with anything fun, there are going to be at least a few crabbit
souls who will hate this. For them, let’s implement a toggle. First,
the toggle itself, in _includes/weatherController.njk:
<form id="weatherController">
<input type="checkbox" id="weatherToggle" checked />
<label for="weatherToggle">Show weather?</label>
</form>
Second, a settings modal to hold the toggle, in
_includes/siteSettings.njk (if the feature happens to
be turned on at the moment you should be able to scroll down to the
bottom of the page to see this in action):
<div id="siteSettingsContainer">
<button onclick="siteSettings.showModal();">Site Settings</button>
<dialog id="siteSettings">
<h2>Site Settings</h2>
{% include "weatherController.njk" %}
<button id="settingsDone" onclick="siteSettings.close();">Done</button>
</dialog>
</div>Alright, now we just need to pop our site settings include into the site footer and wire everything up together.
Wiring it all up #
Let’s first add a quick rule to our CSS:
.hidden {
display: none;
}
Then we can work on our script. Let’s add it to the bottom of our
weather include, _includes/weather.njk, as it’s
positioned right before the closing </body> tag.
First, we’ll check local storage to see if the user has set a
preference before; if so, we’ll add/remove the
.hidden CSS rule to our weather element and update the
weather-controller checkbox accordingly:
<script>
const weather = document.getElementById("weather");
const weatherToggle = document.getElementById("weatherToggle");
const weatherPreference = localStorage.getItem("weather");
// Initial weather preference check on page load
if (weatherPreference == 0) {
weather.classList.add("hidden");
weatherToggle.checked = false;
} else {
weather.classList.remove("hidden");
weatherToggle.checked = true;
};Then, we’ll create an event listener on the checkbox, which will add a value into local storage to save our visitor’s preference and add/remove that CSS rule whenever a change to the checkbox value is detected:
// Handle weather setting toggle
weatherToggle.addEventListener('change', function() {
if (this.checked) {
localStorage.setItem("weather", 1);
weather.classList.remove("hidden");
} else {
localStorage.setItem("weather", 0);
weather.classList.add("hidden");
};
});
</script>Done! #
With that, we’re done! We now have a “falling-snow” effect that can
take any emoji (or arbitrary text) set in
_data/metadata.js, and can be toggled on and off by the
visitor whose preference is retained in local storage across
sessions.
