JSFiddle - React, Tailwind, and code Playground

by matraska23

HTML

<!--
Пример реализации падающих снежинок на css3
Замечание:
1) Автор не я, оригинал нашел на http://natbat.net/code/clientside/css/snowflakes/
2) Работает на FF и Chrome(Webkit)
3) Снежинки это всего лишь символы unicode. У некоторых они наблюдаются либо в виде квадратиков или иероглифов.
-->
<div id="container"></div>

CSS

#container{
   position:fixed;
   left:0;
   top:0;
   width:100%;
   height:100%;
   background:orange; 
}
.snowflake {
    position: absolute;
    text-align: center;
    z-index: 9999;
    top: -100px;
    width: 1em;
    height: 1em;
    color: blue;
    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;
    -moz-animation-iteration-count: infinite/*, 20*/;
    -moz-animation-direction: normal, normal;
    -moz-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%;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -moz-animation-timing-function: ease-in-out;
    -moz-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%   {...

JavaScript

// Определяем случайное целое число в диапазоне ограниченном low и height 
function randomInteger(low, high) {
    return low + Math.floor(Math.random() * (high - low));
}
function randomFloat(low, high) {
    return low + Math.random() * (high - low);
}
function randomItem(items) {
    return items[randomInteger(0, items.length - 1)]
}
//  число "переделываем" в задержку
function durationValue(value) {
    return value + 's';
}
// небольшой prefix killer:
// snowflakeElement.style["MozAnimationName"] = 'fade, drop';
// snowflakeElement.style["WebkitAnimationName"] = 'fade, drop';
var withPrefix= function(node,styleName,value){
    var prefixArray=["Webkit","Moz"];
    for(var i in prefixArray){
        node.style[prefixArray[i]+styleName]=value;
    }
};
function createASnowflake(is_first) {
    // наши снежинки
    var flakes = ['2746', '2745', '2744', '2733', '2738','2720'];
   
    var sizes = ['tiny', 'tiny', 'tiny', 'small', 'small', 'small', 'small', 'medium', 'medium', 'medium', 'medium', 'medium', 'medium', 'large', 'massive'];
    var     snowflakeElement = document.createElement('div'),
            snowflake = document.createElement('span');
    snowflakeElement.className = 'snowflake ' + randomItem(sizes);
    snowflake.innerHTML = '&#x' + randomItem(flakes) + ';';
    snowflakeElement.appendChild(snowflake);
    // напрвление вращения снежинки (По или против часовой стрелки)
    var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpin';
    // 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, 5));
    withPrefix(snowflakeElement,"AnimationName",'fade, drop' );
   ...