Baby, It’s Cold Outside

Today we’re adding a touch of Christmas sparkle to our apps: we’re going to add a snowstorm:

https://let-it-snow.anvil.app

It’s very simple, so I’ll show you how! Or you can clone the app for yourself:

We’re going to tweak a few lines in the HTML and CSS that go into the app.

Go to any Anvil app, click on ‘Assets’ in the App Browser, and select ‘standard-page.html’ from the DropDown at the top.

We’ll add one line of HTML inside our “content” div, so that it looks like this:

<div class="content">
  <div id="snow"></div> <!-- Add this line -->
  <div anvil-slot-repeat="default" class="anvil-measure-this"></div>
  <div class="placeholder drop-here" anvil-if-slot-empty="default" anvil-drop-slot="default">Drop a ColumnPanel here.</div>
</div>

Now, all we need to do is apply a sprinkle of CSS to our ‘snow’ div. Select ’theme.css’ from the DropDown at the top, and add these lines:

#snow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(https://usercontent.irccloud-cdn.com/file/Lh7a6nSo/snow3.png), url(https://usercontent.irccloud-cdn.com/file/Lh7a6nSo/snow3.png);
  background-size: 144px, 108px;
  background-position: 0px, 54px;
  background-repeat: repeat-x repeat-y, repeat-x repeat-y;
  animation: 6s linear 0s infinite snowing;
  opacity: 0.75;
}

@keyframes snowing {
  0% {
    background-position: 0 0, 0 0;
  }
  25% {
    background-position: -36px 144px, -36px 36px;
  }
  100% {
    background-position: 144px 432px, -108px 216px;
  }
}
/* Thanks to https://codepen.io/meese for the pen. */

Wrap up warm, and enjoy the view!

Get your fill of festive frostiness here:

https://let-it-snow.anvil.app

View the source code: