Created
June 23, 2014 11:29
-
-
Save leykov/4e12e25a3e8c6b336b91 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Web Animations: Snow</title> | |
| </head> | |
| <body> | |
| <div id="snow"></div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment