JSFiddle - React, Tailwind, and code Playground

by ChristopherBurton

HTML

<div class="colophon">
  <span>Aa</span>
  <ul>
    <li>Typeface: <a href="#">Old Standard</a></li>
    <li>Designer: <a href="#">Alexey Kryukov</a></li>
    <li><p>Old Standard was intended as a multilingual font family suitable for biblical, classical and medieval studies as well as for general-purpose typesetting in languages which use Greek or Cyrillic script.</p></li>
  </ul>
</div>

CSS

* {margin:0; padding:0;}

.colophon {
  width: 500px;
  height: 190px;
  border-top: 1px dotted #d0d5d5;
  border-bottom: 1px dotted #d0d5d5;
  margin: 50px auto 0 auto;
  padding: 15px 0;
}

.colophon span {
  float: left;
  width: 250px;
  font: normal 130px/190px Georgia;
  text-align: center;
}

.colophon ul {
  float: right;
  width: 234px;
  border-left: 1px dotted #d0d5d5;
  list-style: none;
  padding-left: 15px;
  line-height: 200px;
}

.colophon ul li {
  font: normal 15px/20px "Old-standard", Georgia;
}

.colophon ul li p {
  border-top: 1px dotted #d0d5d5;
  margin-top: 15px;
  padding-top: 15px;
}
    
.colophon ul li a {
  color: #bf1708;
  text-decoration: none;
}

JavaScript

$(function(){
    // set a timeout for 2 seconds to change the initial content of the span to itallic
    setTimeout(function(){
        // fade out the span, and execute an anon function when its hidden
        $('.colophon span').fadeOut(200,function(){
            // add a css font style to the pan to make the font italic
            $(this).css('font-style','italic').fadeIn(200); 
        });
    },1600);
    // set an interval to execute a function every four seconds
    setInterval(function(){
        // set the variable c to equal the first letter from the span
        // if that is undefined or null then set it to equal the @ character
        var c = $('.colophon span').text()[0] || "@";
        // execute the changeChar function passing the value of c as an argument
         changeChar(c)   
    },4000);
});

// function to aninate and change the contents of the span
function changeChar(b){
    // set the vai=riable a to equal the returned value from the doNext funtion
    // here we also pass the argument as a conditional to check if the variable b == char "Z"
    // if it does then we pass the "@" char instead so that the function will return "A" instead of "["
    var a = doNext(b == "Z" ? "@" : b);
    // fade out the span and execute an anonymous function
    $('.colophon span').fadeOut(200,function(){
        // remove the "style" attribute from the span to return the text back to roman from italic
        $(this).css('font-style','normal');
        // set the content of the span to equal the variable a and also the variable a.tolowercase
        // then fade it back in, wait for 2 seconds then fade back out executing an anon function
        $(this).text(a + a.toLowerCase()).fadeIn(200).delay(1600).fadeOut(200,function(){
            // add css to change the contents of the span from roman to italic and fade back in
             $(this).css('font-style','italic').fadeIn(200);   
        });   
    })
}

function doNext(a) {
    // simple function...