JSFiddle - React, Tailwind, and code Playground

by judeosborn

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

body {
    margin: 0;
    padding: 0;
}
ul {
    margin: 0;
    padding: 0;
    width: 150px;
    height: 150px;
    background-color: #eee;
}
li {
    position: absolute;
    background-color: #aaa;
    width: 5px;
    height: 5px;
    list-style: none;
    padding: 0;
    margin: 0 0 2px 0;
}

JavaScript

// Space each li out vertically.
$("li").each(function (i) {
    $(this).css('top', (5 * i) + "px");
});

var itemLoop = function () {
    $("li").each(function () {
        var pos = $(this).position();
        getLeft = parseInt(pos.left, 10);
        getTop = parseInt(pos.top, 10);

        if (getTop > 0 && getLeft < 5) {
            $(this).css('top', (getTop - 5) + "px");
        } else if (getTop > 140) {
            $(this).css('left', (getLeft - 5) + "px");
        } else if (getLeft > 140) {
            $(this).css('top', (getTop + 5) + "px");
        } else {
            $(this).css('left', (getLeft + 5) + "px");
        }
    });
};

setInterval(itemLoop, 100);