JSFiddle - React, Tailwind, and code Playground

by ddrace

HTML

<div id="intro">
  <div class="quote">
    <p>First quote</p>
  </div>
  <div class="quote">
    <p>Second quote</p>
  </div>
  <div class="quote">
    <p>Third quote</p>
  </div>
</div>

CSS

#intro {
    position: relative;
    height: 100px;
    background: #ccc;
    }
#intro div{
    position: absolute;
    top: 40px;
    width: 100px;
    }
#intro div.quote:first-child {
    top: 20px;
    }

JavaScript

// hide all quotes except the first
$('.quote').hide().eq(0).show();

var pause = 3000;
var motion = 500;

var quotes= $('.quote');
var count = quotes.length;
var i = 0;

setTimeout(transition,pause);

function transition(){
    quotes.eq(i).animate({opacity:'toggle', top:'40px'}, motion);

    if(++i>=count){
        i=0;
    }

    quotes.eq(i).animate({opacity:'toggle', top:'20px'}, motion);
    
    setTimeout(transition, pause);
}