Marquee 2.0

by Felype Rennan

HTML

<div>
    <ul class="girativo">
        <li class="atual">Não vamos colocar uma <span class="enfase2">&lt;meta&gt;</span></li>
        <li>Vamos deixar a <span class="enfase">&lt;meta&gt;</span> em aberto</li>
        <li>quando atingirmos a <span class="enfase2">&lt;meta&gt;</span></li>
        <li>Nós dobramos a <span class="enfase">&lt;meta&gt;</span></li>
    </ul>
</div>

SCSS

body {
    font-family: "Lucida Sans", sans-serif;
}

.enfase {
    color: darken(cyan, 8%);
}
.enfase2 {
    color: darken(rgb(255,0,120), 8%);
}

ul.girativo {
    list-style: none !important; /* !ultra-important; */
    width: 900px;
    height: 100px;
    background: #012;
    position: relative;
    perspective: 80vmax;
    user-select: none;
    > li {
        transition: 0.2s cubic-bezier(0, 0.73, 0.7, 1.29);
        position: absolute;
        top: 0; left: 0;
        font-size: 50px;
        padding: 20px;
        background: transparent;
        opacity: 0;
        color: #eee;
        overflow: hidden;
        white-space: nowrap;
        
        transform: translateY(-50px) rotateX(90deg);
    }
    > li.atual {
        opacity: 1;
        transform: translateX(0) rotateX(0);
    }
    > li.anterior:not(.atual) {
        transform: translateY(50px) rotateX(-90deg);   
        opacity: 0;
    }
}

JavaScript

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