JSFiddle - React, Tailwind, and code Playground

by Felype Rennan

HTML

<div>
    <ul class="girativo">
        <li class="atual">Faça do presente</li>
        <li>O passado bom</li>
        <li>Que será lembrado</li>
        <li>No futuro</li>
        <li>Ou faça Ciencias da Computação.</li>
    </ul>
</div>

SCSS

ul.girativo {
    list-style: none !important; /* !ultra-important; */
    width: 800px;
    height: 100px;
    background: #012;
    position: relative;
    > li {
        transition: 0.2s ease-out;
        position: absolute;
        top: 0; left: 0;
        font-size: 50px;
        padding: 20px;
        background: transparent;
        color: #eee;
        transform-origin: top;
        transform: translateX(0) rotateX(90deg);
    }
    > li.atual {
        transform: translateX(0) rotateX(0);
    }
    > li.anterior:not(.atual) {
        transform: translateY(100px) rotateX(-90deg);    
    }
}

JavaScript

$(document).ready(function() {
    var timer = setInterval(function() {
        $(".girativo > li").removeClass(".anterior");
        $(".girativo > .atual").addClass("anterior");
        if($(".girativo > .anterior").next()) {
            $(".girativo > .anterior").next().addClass("atual");
        }
        else {
            $(".girativo > li").first().addClass("atual");
        }
        $(".girativo > .anterior").removeClass("atual");
    }, 2000);
});