.snowflake { position: absolute; text-align: center; z-index: 9999; top: -100px; width: 1em; height: 1em; color: white; font-size: 16px; text-shadow: rgba(0, 0, 0, 0.7) 1px 1px 2px; /* We use the following properties to apply the fade and drop animations to each snowflake. Each of these properties takes two values. These values respectively match a setting for fade and drop. */ -webkit-animation-iteration-count: infinite, 20; -webkit-animation-direction: normal, normal; -webkit-animation-timing-function: linear, ease-in; } .snowflake span { position: absolute; display: block; width: 1em; height: 1em; /* We use the following properties to adjust the clockwiseSpin or counterclockwiseSpin animations on each snowflake. The createASnowflake function determines whether a flake has the clockwiseSpin or counterclockwiseSpin animation. */ -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; -webkit-transform-origin: 50% -100%; } .snowflake.tiny { font-size: 0.5em; } .snowflake.small { font-size: 1em; } .snowflake.medium { font-size: 2em; } .snowflake.large { font-size: 3em; } .snowflake.massive { font-size: 7em; } /* Hides a snowflake towards the very end of the animation */ @-webkit-keyframes fade { /* Show a snowflake while into or below 85 percent of the animation and hide it, otherwise */ 0% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } } /* Makes a snowflake fall from -50px to 650px pixels in the y-axis */ @-webkit-keyframes drop { 0% { -webkit-transform: translate(0px, -50px); } 100% { -webkit-transform: translate(0px, 650px); } } /* Rotates a snowflake from -50 to 50 degrees in 2D space */ @-webkit-keyframes clockwiseSpin { 0% { -webkit-transform: rotate(-50deg); } 100% { -webkit-transform: rotate(50deg); } } /* Rotates it from 50 to -50 degrees in 2D space */ @-webkit-keyframes counterclockwiseSpin { 0% { -webkit-transform: rotate(50deg); } 100% { -webkit-transform: rotate(-50deg); } } <![CDATA[// <![CDATA[ /* Define the number of snowflakes to be used in the animation */ const SNOWFLAKES = 10; function init() { /* Fill the empty container with freshly driven snow */ var first = true; for (var i = 0; i < SNOWFLAKES; i++) { document.body.appendChild(createASnowflake(first)); first = false; } } /* Receives the lowest and highest values of a range and returns a random integer that falls within that range. */ function randomInteger(low, high) { return low + Math.floor(Math.random() * (high - low)); } /* Receives the lowest and highest values of a range and returns a random float that falls within that range. */ function randomFloat(low, high) { return low + Math.random() * (high - low); } function randomItem(items) { return items[randomInteger(0, items.length - 1)] } /* Returns a duration value for the falling animation.*/ function durationValue(value) { return value + 's'; } function createASnowflake(is_first) { var flakes = ['2746', '2745', '2744', '2733']; var superFlakes = ['2746', '2745', '2744', 'fc7', '274b', '2749', '2747', '2746', '273c', '273b', '2734', '2733', '2732', '2731', '2725']; var sizes = ['tiny', 'tiny', 'tiny', 'small', 'small', 'small', 'small', 'medium', 'medium', 'medium', 'medium', 'medium', 'medium', 'large', 'massive']; /* Start by creating a wrapper div, and an empty span */ var snowflakeElement = document.createElement('div'); snowflakeElement.className = 'snowflake ' + randomItem(sizes); var snowflake = document.createElement('span'); snowflake.innerHTML = '&#x' + randomItem(flakes) + ';'; snowflakeElement.appendChild(snowflake); /* Randomly choose a spin animation */ var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpin'; /* Randomly choose a side to anchor to, keeps the middle more dense and fits liquid layout */ var anchorSide = (Math.random() < 0.5) ? 'left' : 'right'; /* Figure out a random duration for the fade and drop animations */ var fadeAndDropDuration = durationValue(randomFloat(5, 11)); /* Figure out another random duration for the spin animation */ var spinDuration = durationValue(randomFloat(4, 8)); // how long to wait before the flakes arrive var flakeDelay = is_first ? 0 : durationValue(randomFloat(0, 10)); snowflakeElement.style.webkitAnimationName = 'fade, drop'; snowflakeElement.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration; snowflakeElement.style.webkitAnimationDelay = flakeDelay; /* Position the snowflake at a random location along the screen, anchored to either the left or the right*/ snowflakeElement.style[anchorSide] = randomInteger(0, 60) + '%'; snowflake.style.webkitAnimationName = spinAnimationName; snowflake.style.webkitAnimationDuration = spinDuration; /* Return this snowflake element so it can be added to the document */ return snowflakeElement; } window.onload = init; // ]]]]><![CDATA[>]]>
gummygunk
yousharknotpass
blakekathryn
jbbartram-illu
vaporwave
areudirty
theartofmadeline
pixelskylines
janainaart