Skip to content

Instantly share code, notes, and snippets.

@magical
Last active Dec 13, 2020
Embed
What would you like to do?
snowflakes
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!doctype html>
<body bgcolor="#808080">
<script src="snow.js"></script>
</body>
/* Based on https://c.eev.ee/PARTYMODE/ */
/* Snowflake images from https://www.misha.studio/snowflaker/ */
.snow--container {
position: fixed;
z-index: 10000;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
pointer-events: none;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
.snow--flake {
position: absolute;
top: 0;
left: 0;
animation-name: snow--flake1;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
background-image: url(flakes.png);
width: 54px;
height: 54px;
background-size: 425px auto;
background-position: -26.5625px -26.5625px;
background-repeat: no-repeat;
}
@keyframes snow--flake1 {
from {
transform: translate(-10vw, -20vh) rotate(0deg);
}
to {
transform: translate(10vw, 120vh) rotate(180deg);
}
}
/* ~ugh~ */
.snow--flake {
-webkit-animation-name: snow--flake1;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in;
}
@-webkit-keyframes snow--flake1 {
from {
-webkit-transform: translate(-10vw, -20vh) rotate(0deg);
}
to {
-webkit-transform: translate(10vw, 120vh) rotate(180deg);
}
}
/* Based on https://c.eev.ee/PARTYMODE/ */
/* Snowflake images from https://www.misha.studio/snowflaker/ */
(function() {
// Number of kilopixels dedicated to each snowflake
var FLAKE_SPARSITY = 15;
var FLAKE_POP = 35;
// Get the path to ourselves
var cur = document.currentScript;
var path;
if (cur) {
path = cur.src;
}
else {
var scripts = document.getElementsByTagName('script');
path = scripts[scripts.length - 1].src;
}
var lastslash = path.lastIndexOf('/');
if (lastslash >= 0)
path = path.substring(0, lastslash + 1);
// Inject CSS we need
var css = document.createElement('link');
css.type = 'text/css';
css.rel = 'stylesheet';
css.href = path + 'snow.css';
document.head.appendChild(css);
// Create the container and fill it with some elements
var container = document.createElement('div');
container.className = 'snow--container';
var num_flakes = (
document.documentElement.clientWidth
* document.documentElement.clientHeight
/ FLAKE_SPARSITY
/ 1000
);
for (var i = 0; i < num_flakes; i++) {
var flake = document.createElement('div');
flake.className = 'snow--flake';
//flake.className += ' snow--flake' + Math.floor(Math.random() * FLAKE_POP);
// Randomize a bit
flake.style.animationDelay = "-" + String(Math.random() * 4) + "s";
flake.style.animationDuration = String(Math.random() * 3 + 4) + "s";
flake.style.left = String(Math.random() * 120 - 10) + "%";
// Set flake position
var flakeno = Math.floor(Math.random() * FLAKE_POP);
flake.style.backgroundPositionX = -(26.5625 + 53.125*(flakeno%7)) + 'px';
flake.style.backgroundPositionY = -(26.5625 + 53.125*Math.floor(flakeno/7)) + 'px';
container.appendChild(flake);
}
// And done! No actual iavascript required to keep it running.
document.documentElement.appendChild(container);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment