JSFiddle - React, Tailwind, and code Playground

by sweetmaanu

HTML

<div id="thumbs">
    <div class="thumbnails">
        <div class="thumb-info">user</div>
        <div class="thumb-img">IMG</div>
    </div>
    <div class="thumbnails">
        <div class="thumb-info">user</div>
        <div class="thumb-img">IMG</div>
    </div>
    <div class="thumbnails">
        <div class="thumb-info">user</div>
        <div class="thumb-img">IMG</div>
    </div>
    <div class="thumbnails">
        <div class="thumb-info">user</div>
        <div class="thumb-img">IMG</div>
    </div>
    <div class="thumbnails">
        <div class="thumb-info">user</div>
        <div class="thumb-img">IMG</div>
    </div>
    <div class="thumbnails">
        <div class="thumb-info">user</div>
        <div class="thumb-img">IMG</div>
    </div>
    <div class="thumbnails">
        <div class="thumb-info">user</div>
        <div class="thumb-img">IMG</div>
    </div>
    <div class="thumbnails">
        <div class="thumb-info">user</div>
        <div class="thumb-img">IMG</div>
    </div>
    <div class="thumbnails">
        <div class="thumb-info">user</div>
        <div class="thumb-img">IMG</div>
    </div>
    <div class="thumbnails">
        <div class="thumb-info">user</div>
        <div class="thumb-img">IMG</div>
    </div>
</div>

CSS

.thumbnails {
    float: left;
    width: 100px;
    height: 100px;
    background: #EEE;
    border: 1px solid #999;
    position: relative;
    overflow: hidden;
}
.thumb-info {
    background: blue;
    position: absolute;
    width: 100%;
    height: 100%;
}
.thumb-img {
    background: yellow;
    width: 100%;
    height: 100px;
}

JavaScript

function e(e) {
        var t = $(window).scrollTop(),
            n = t + $(window).height(),
            r = $(e).offset().top,
            i = r + $(e).height() * .8;
        return i >= t && r <= n && i <= n && r >= t
    }

    function s() {
        if (e(t) && !i) {
            r.each(function (e) {
                $(this).delay(200 + e * 50).animate({
                    top: "-110%"
                }, 500)
            }).each(function (e) {
                $(this).delay(200 + e * 100).animate({
                    top: "0%"
                }, 500)
            });
            i = !0
        }
        i && $(window).unbind("scroll", s)
    }
    var n = $("#thumbs"),
        t = $(".thumbnails"),
        r = n.find(".thumb-info"),
        i = !1;
    s();
    $(window).bind("scroll", s);