JSFiddle - React, Tailwind, and code Playground

by collederfomento

HTML

<div id="item_1" class="item color_1">one day more</div>
<div id="item_2" class="item color_2">another day another destiny</div>
<div id="item_3" class="item color_3">this neverending road to calvary</div>
<div id="item_4" class="item color_4">these men who seem to know my crime</div>
<div id="item_5" class="item color_5">will surely come a second time</div>
<div id="item_6" class="item color_6">i did not live until today</div>
<div id="item_7" class="item color_7">how can I live when we are parted?</div>
<div id="item_8" class="item color_8">tomorrow youll be worlds away</div>
<div id="item_9" class="item color_9">and yet with you, my world has started</div>
<div id="item_10" class="item color_10">one more day all on my own</div>

CSS

html, body {overflow-x:hidden;margin:0;padding:0;}
.item {
  position:relative;
  width:100vw;
  height:50vh;
  background:#ccc;
 }
 
.color_1 {background:#5F1C65}
.color_2 {background:#992E8D}
.color_3 {background:#E3905B}
.color_4 {background:#EDC253}
.color_5 {background:#F0D79C}
.color_6 {background:#80DF7E}
.color_7 {background:#A6EBB9}
.color_8 {background:#FCDDE9}
.color_9 {background:#F2BEE4}
.color_10 {background:#FE7875}

JavaScript

let scrolledDistance;
let triggerDistance = $(document).height() - $(window).height() - 50;
let OriginalItems = $(".item").length;

$(window).scroll(function() {

    scrolledDistance = $(window).scrollTop();

    if ( scrolledDistance > triggerDistance) {
		    var randomItem = Math.floor(Math.random() * OriginalItems);
        var clonedItem = $("#item_"+randomItem).clone();
        clonedItem.removeAttr('id');
        clonedItem.appendTo("html");

    }

});