Skip to main
Table of Contents

Animated Background Snowfall

This demo layers cloud and snow textures with separate animation timing so the foreground and background drift at different rates.

  • Fixed full-viewport effect container.
  • Horizontal cloud drift with repeated textures.
  • Dual-axis snow animation for depth and motion.

The tall spacer below is deliberate: it creates scrollable breathing room so the background effect can be viewed with less obstruction over a longer scroll range.

The Code

The snippets below show the exact structure and styling pattern used for this example, so you can copy the baseline and adapt layer assets, timing, and motion to your own effect.

HTML 

<div id="background-effect" class="background-effect--snowfall">/n  <div id="background-effect__animations">/n    <div class="snowfall-cloudlayers"></div>/n    <div class="snowfall-snowlayers"></div>/n  </div>/n</div>

CSS 

#background-effect.background-effect--snowfall {/n  bottom: 0;/n  left: 50%;/n  top: 0;/n  margin: 0;/n  position: fixed;/n  width: 100%;/n  transform: translateX(-50%);/n  z-index: -100;/n}/n/n#background-effect.background-effect--snowfall div {/n  position: absolute;/n  width: 100%;/n  height: 100%;/n}/n/n#background-effect.background-effect--snowfall #background-effect__animations {/n  animation: fade-in 2s cubic-bezier(0.55, 0.06, 0.68, 0.19);/n  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.125) 64px, rgba(255, 255, 255, 0) 192px, rgba(255, 255, 255, 0) 100%);/n}/n/n#background-effect.background-effect--snowfall .snowfall-cloudlayers {/n  background-image: url(/asset/image/interface/background/snowfall/cloudlayer1.png), url(/asset/image/interface/background/snowfall/cloudlayer2.png);/n  background-position: 0 0px, 0 0;/n  background-repeat: repeat-x, repeat-x;/n  background-size: 1152px 128px, 1440px 160px;/n  animation-duration: 600s;/n  animation-name: snowfall-cloudlayers-animation;/n  animation-iteration-count: infinite;/n  animation-timing-function: linear;/n  opacity: 0.5;/n}/n/n#background-effect.background-effect--snowfall .snowfall-snowlayers {/n  background-image: url(/asset/image/interface/background/snowfall/snowlayer1.png), url(/asset/image/interface/background/snowfall/snowlayer2.png), url(/asset/image/interface/background/snowfall/snowlayer3.png);/n  background-position: 0 0px, 0 0px, 0 0;/n  background-repeat: repeat, repeat, repeat;/n  background-size: 512px 512px, 512px 512px, 512px 512px;/n  animation-duration: 75s, 50s;/n  animation-name: snowfall-snowlayers-animation-x, snowfall-snowlayers-animation-y;/n  animation-iteration-count: infinite, infinite;/n  animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1), linear;/n  opacity: 0.375;/n}/n/n@keyframes fade-in {/n  from {/n    opacity: 0;/n  }/n/n  to {/n    opacity: 1;/n  }/n}/n/n@keyframes snowfall-cloudlayers-animation {/n  from {/n    background-position: 0 0px, 0 0;/n  }/n/n  to {/n    background-position: 14399px 0px, 10079px 0;/n  }/n}/n/n@keyframes snowfall-snowlayers-animation-x {/n  0% {/n    background-position-x: 0px, 0px, 0;/n  }/n/n  20% {/n    background-position-x: 1263.2px, 648.8px, 239.2px;/n  }/n/n  40% {/n    background-position-x: 3651.4px, 2422.6px, 1603.4px;/n  }/n/n  60% {/n    background-position-x: 4539.6px, 2696.4px, 1467.6px;/n  }/n/n  80% {/n    background-position-x: 6927.8px, 4470.2px, 2831.8px;/n  }/n/n  100% {/n    background-position-x: 8191px, 5119px, 3071px;/n  }/n}/n/n@keyframes snowfall-snowlayers-animation-y {/n  0% {/n    background-position-y: 0px, 0px, 0;/n  }/n/n  20% {/n    background-position-y: 2047.8px, 819px, 614.2px;/n  }/n/n  40% {/n    background-position-y: 4095.6px, 1638px, 1228.4px;/n  }/n/n  60% {/n    background-position-y: 6143.4px, 2457px, 1842.6px;/n  }/n/n  80% {/n    background-position-y: 8191.2px, 3276px, 2456.8px;/n  }/n/n  100% {/n    background-position-y: 10239px, 4095px, 3071px;/n  }/n}/n/n@media (min-resolution: 2dppx) {/n  #background-effect.background-effect--snowfall .snowfall-cloudlayers {/n    background-image: url(/asset/image/interface/background/snowfall/cloudlayer1.x2.png), url(/asset/image/interface/background/snowfall/cloudlayer2.x2.png);/n    animation-duration: 900s;/n  }/n/n  #background-effect.background-effect--snowfall .snowfall-snowlayers {/n    background-image: url(/asset/image/interface/background/snowfall/snowlayer1.x2.png), url(/asset/image/interface/background/snowfall/snowlayer2.x2.png), url(/asset/image/interface/background/snowfall/snowlayer3.x2.png);/n    animation-duration: 100s, 75s;/n  }/n}

Sources

This page is comprised of my own additions and either partially or heavily modified elements from the following source(s):