JSFiddle - React, Tailwind, and code Playground

by otinanaipali

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
</ul>

CSS

body,html{margin:0;padding:0}
ul{margin:0;padding:0;list-style:none;position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;background:#ccc}
li{display:block;width:100px;height:100px;text-align:center;color:#dfdfdf;background:#fff;font:bold 70px/100px Arial;position:absolute;left:-100px}

JavaScript

$(function () {
    $('li').each(function(){
        $(this).css({
            'top': randomTop()+'px',
            'left': randomLeft()+'px',
        });
        animateMe($(this));
    });
});

var animateMe = function(targetElement){
    $(targetElement).css({
        'top': randomTop()+'px',
    });
    $(targetElement).animate(
        {
        'left': $(document).width()
        },
        {
        duration: randomSpeed(),
        complete: function() {
            $(this).css('left', '-100px');
            animateMe(this, randomSpeed());
        }
        }
    );

};

function randomTop() {
    var winHgt = $(window).height();
    var rdmTop = Math.floor(Math.random() * winHgt);
    return rdmTop;
}
function randomLeft() {
    var winWdt = $(window).width();
    var rdmLt = Math.floor(Math.random() * winWdt);
    return rdmLt;
}
function randomSpeed() {
    var winWdt = $(window).width();
    var rdmSpd = Math.floor(Math.random() * 10000)+3000;
    console.log(rdmSpd);
    return rdmSpd;
}