The Falling Snow Effect ⛄

Bring some wintery, holiday flair to your content...and learn a bunch about animation techniques along the way.

Like malls and shopping centers around Thanksgiving and Christmas, this site gets a sudden burst of traffic around this time. What is the destination for this seasonal traffic? It is the Falling Snow Effect:

This is an effect I created more than 15 years ago for a Flash audience, but its JS-friendly incarnation still manages to add a bit of flair to many websites and apps even today…maybe even yours!

The Falling Snow article walks you through the HTML, CSS, and JS you need to add to bring this effect to life on your own properties. I also describe some common customizations you can make, and if you are stuck at any point, just ask on the forums. I will personally assist you!

Behind the Effect

If you want to go deeper, this effect touches upon many JavaScript-based animation techniques to work the way it does. There are two techniques I want to highlight.

No/Reduced Animation for Me, Please!

If you have a system setting to reduce animations enabled, this effect will not run. We have some code that listens to the prefers-reduced-motion setting that almost all browsers today respect:

var reduceMotionQuery = matchMedia("(prefers-reduced-motion)");

if (reduceMotionQuery.matches) {
  // no or reduced animation!
} else { 
  // play animation with no hesitation!
}

The Toggling Animations On and Off article goes into more detail on how to implement this capability.

Ensuring Consistent Running Speed

Continuing a theme from an earlier newsletter post, we need to ensure this effect runs at a consistent speed that is independent of your browser/screen’s refresh rate. We don’t want the snow effect to be a gentle flurry for some people and a horrendous blizzard for others on high refresh rate screens!

To ensure consistency, this effect uses a delta time approach where we alter the rate of an animation’s change based on the current frame rate:

// set the expected frame rate
let frames_per_second = 60;
let frame_interval = 1000 / frames_per_second;

let previousTime = performance.now();
let delta = 0;

let xPosition = 1;

function animationLoop(currentTime) {
  delta = (currentTime - previousTime) / frame_interval;

  xPosition += 5 * delta;
  console.log(xPosition);

  previousTime = currentTime;

  requestAnimationFrame(animationLoop);
}
requestAnimationFrame(animationLoop)

I’ll be writing in great detail about this shortly, so keep an eye out for this. You can get a sneak peek at one implementation of delta time by inspecting the source from this example.

Conclusion

As always, thanks for taking the time out of your busy day to read this newsletter. With all of the drama going on with social networks over the past month, the only thing I am sure about is that you can always find me on KIRUPA, the forums, or in this newsletter. You can also find me on Twitter for as long as the service is sustainable (and I do hope it thrives and lasts for a long time!), and I have a new poll that you may want to chime in on :P

See you next time and have a wonderful Thanksgiving if you are in a part of the world that celebrates it! 🌽

Cheers,
Kirupa 😊

---