JSFiddle - React, Tailwind, and code Playground

by colintoh

HTML

<div id="box">
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <li>six</li>
    <li>seven</li>
    <li>eight</li>
    <li>nine</li>
    <li>ten</li>
    <li>eleven</li>
    <li>twelve</li>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <li>six</li>
    <li>seven</li>
    <li>eight</li>
    <li>nine</li>
    <li>ten</li>
    <li>eleven</li>
    <li>twelve</li>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <li>six</li>
    <li>seven</li>
    <li>eight</li>
    <li>nine</li>
    <li>ten</li>
    <li>eleven</li>
    <li>twelve</li>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <li>six</li>
    <li>seven</li>
    <li>eight</li>
    <li>nine</li>
    <li>ten</li>
    <li>eleven</li>
    <li>twelve</li>
</ul>
</div>

CSS

#box {
    width:200px;
    height:400px;
    overflow-y:auto;
    overflow-x:hidden;
}

ul{
    -webkit-perspective: 600px;
    -webkit-perspective-origin: 0 0;
    background:black;
}

li{
    background:#aaa;
    height:40px;
    text-align:center;
    position:relative;
    -webkit-transition:all 600ms ease;
    -webkit-backface-visibility:hidden;
    -webkit-transform-origin: 0% 0%;
}

ul li:nth-child(odd) {
        background: #fff;
    }

.past{
    -webkit-transform:skew( 0deg, -30deg );
}

.future{
    -webkit-transform:skew( 0deg, 50deg );
}

JavaScript

var list = $('li'),
    lastTop = 0;

window.requestAnimFrame = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

function update() {
    if ($(list[0]).offset().top != lastTop) {
        lastTop = $(list[0]).offset().top;

        for (var i = -1, l = list.length; ++i < l;) {
            ele = $(list[i]);
            if (ele.offset().top < -140) {
                ele.addClass('past');
            }
            else if (ele.offset().top > 400) {
                ele.addClass('future');
            }
            else {
                ele.removeClass('past future');
            }
        }
    }
};

function animloop() {
    requestAnimFrame(animloop);
    update();
};

animloop();