css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

The 2017 version of the /r/Overwatch snow effect. We use a perspective-enabled container to give the snow depth. This also 3d accelerates the effect, greatly reducing CPU usage. You can adjust the snow in various ways, but this is probably the simplest with a low performance hit but still a good effect.

For 2017, we added some layers to the snow scene with characters having a snowball fight. We simulate depth of field by blurring the furthest snow effect manually, and increasing the density a bit to help the browser scale far objects. We use a mix of translateZ and simply scaling down the snow to add depth.

We're not really matching how slow or fast the snow might be at the actual distances we're showing it, but that's OK for the purpose of this demo and small scope project.

/r/Overwatch usually has a blurred menu bar that we would previously add a blurry snow layer to match that for. We ditched that this time for simplicity, since our CSS was over 100kib long (the cap for Reddit stylesheets) and eliminating the blurred menu bar code allowed the snow to fit in the stylesheet nicely.


  1. No comments yet.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.