JSFiddle - React, Tailwind, and code Playground

by Aaron Zhang

HTML

<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div...

CSS

.demo {
    width:100%;
    height:500px;
}

JavaScript

var detect = true;
$(document).ready(function () {
    $('.demo').each(function () {
        var r = Math.random() * 255 >>> 1;
        var g = Math.random() * 255 >>> 1;
        var b = Math.random() * 255 >>> 1;
        $(this).css('background-color', 'rgb(' + r + ',' + g + ',' + b + ')');
    });
    var $window = $(window);
    var $document = $(document);
    var timeout = null;
    var autoTriggered = null;
    var timeoutID = null;
    $window.scroll(function () {
        if (autoTriggered) {
            return; // if the event is triggered by animation, do nothing.
        }
        if (timeoutID) {
            clearTimeout(timeoutID);
        }
        if (detect) {
            timeoutID = setTimeout(function () {

                var above = $window.height() * 0.5;
                $('.demo').each(function () {
                    var $this = $(this);
                    var elementWindowTop = $this.offset().top - $document.scrollTop();
                    if (elementWindowTop < above && elementWindowTop > 10) {
                        autoTriggered = true;
                        $('body').animate({
                            scrollTop: $this.offset().top - 50 // set your top offset here, currently 50px
                        }, 618, function () {
                            setTimeout(function () {
                                detect = true;
                                autoTriggered = false; // other scroll event would be manually triggered
                            }, 100); //delay this action because it could auto trigger scroll after the scroll is done
                        });
                        detect = false;
                        return;
                    }
                });

            }, 618);
        }
    });
});