Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Web Animations: Snow</title>
</head>
<body>
  <div id="snow"></div>
</body>
</html>
 
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#snow {
  background-color: rgb(15, 13, 63);
  background-image: linear-gradient(rgb(15, 13, 63), rgb(47, 46, 63));
  height: 100%;
}
.snowflake {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: white;
  box-shadow: inset -3px -3px 5px 0px #999;
  transform: translate(-20px,-20px);
}
 
var SNOWFLAKE_COUNT = 50;
var MIN_DURATION = 5000;
var MAX_DURATION = 8000;
function startSnowing() {
  var parent = document.getElementById('snow');
  var width = window.innerWidth;
  var height = window.innerHeight;
  
  for (var i = 0; i < SNOWFLAKE_COUNT; i++) {
    var snowFlake = document.createElement('div');
    snowFlake.className = 'snowflake';
    parent.appendChild(snowFlake);
    
    var xPos = Math.random() * width;
    // some cheap parallax based on depth in parent
    var duration = MAX_DURATION +
        i / SNOWFLAKE_COUNT * (MIN_DURATION - MAX_DURATION);
    // use a negative delay the first round to start mid-snow
    var delay = -duration * Math.random();
    var player = snowFlake.animate([
      {transform: 'translate(' + xPos + 'px, -20px)'},
      {transform: 'translate(' + xPos + 'px, ' + height + 'px)'}
    ], {
      duration: duration,
      iterations: Infinity,
      delay: delay
    });
  }
}
document.addEventListener('DOMContentLoaded', startSnowing, false);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
brendankennypro
0viewers