JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div class="snowForm" data-snow="form"></div>

CSS

body {
    background: #529CB3;
}

.snowForm {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}

.snowOne {
    position: absolute;
}

.snowOne1 {
    background-image:...

JavaScript

var nS = 0,
    tS = 5,
    wB = $( '[data-snow="form"]' ).width(),
    wB2 = Math.floor( wB / 5 ),
    hB = $( '[data-snow="form"]' ).height();

function startShow() {
    nS = Number(nS + 1);
    var nSn = nS;
    if (tS == 5) {
        tS = 1;

    } else {
        tS = Number(tS + 1);

    }
    $('[data-snow="one-' + Number(nSn - 400) + '"]').remove();
    $('[data-snow="form"]').append('<div class="snowOne snowOne' + tS + '" data-snow="one-' + nSn + '" style=""></div>');

    var l = $('[data-snow="one-' + nSn + ']').width(),
        l1 = genRandW1(0, wB, l),
        l2 = genRandW2(0, wB, l1, l),
        t = genRandH($('[data-snow="one-' + nSn + ']').height(), l2);

    $('[data-snow="one-' + nSn + '"]').css({
        'left': l1 + 'px'
    }).animate({
        'left': l2 + 'px',
        'top': t + 'px'
    }, Math.floor(Math.random() * 6000) + 6000);
};

function genRandW1(a, b, c) {
    var range = b - a - c;
    return Math.floor(Math.random() * range) + a;
}

function genRandW2(a, b, c, d) {
    var range = c - 150;
    range = Math.floor(Math.random() * 300) + range;
    if (range < a) {
        range = a;
    } else if (range > (b - d)) {
        range = b - d;
    }
    return range;
}

function genRandH(h, l2) {
    var range2 = 35;
    /*if ( l2 < wB2 ) {
        range2 = range2 + 15;

    } else if ( l2 > wB2 * 2 && l2 < wB2 * 3 ) {
        range2 = range2 + 15;

    } else if ( l2 > wB2 * 4 ) {
        range2 = range2 + 25;

    }*/
    var range = hB - h - range2;
    range = range + Math.floor(Math.random() * range2);
    return range;
}

$(document).ready(function() {
    setInterval(startShow, Math.floor(Math.random() * 50) + 50);

});