JSFiddle - React, Tailwind, and code Playground

by BenjaminRay

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body style="background-color:gray; margin:0">
    <div id="container" style=" height: 100%; width:20%; margin-left: auto; margin-right: auto"></div>

CSS

.color_0 {
    outline: 1px solid black;
    width: 22%;
    height: 10vh;
    background-color: black;
    color: white;
    line-height: 30px;
    display: inline-block;
}
.color_1 {
    outline: 1px solid black;
    width: 22%;
    height: 10vh;
    background-color:white;
    line-height: 30px;
    display: inline-block;
}

JavaScript

var i = 0;
var blackposition;
var square = $('<span></span>').first();

var endless = setInterval(function () {
    var lungime = ($('span').height()) / 4;
    console.log(lungime);
    if (i % 4 == 0) {
        blackposition = Math.floor(4 * Math.random());
    }

    var math = (blackposition == (i % 4)) ? 0 : 1;



    square.clone().addClass('color_' + math).text((math < 1) ? 'even' + i : 'odd' + i).appendTo('#container');
    i++;
    setTimeout(function () {
        $('body,html').animate({
            scrollTop: '+=' + lungime + 'px'
        }, 500, 'linear');
    }, 22000)

}, 500);




$(window).on('scroll', function () {
    if ($("span").height() < $(window).scrollTop() + 2) {
            console.log('removing row...');
        $(window).scrollTop(0);
        $("span").slice(0, 4).remove();
    }
})