CodePen

HTML

            
              <div class="wrap">
  <div class="colophon">
    <span class="ctext">Aa</span>
    <ul>
      <li>Typeface: <a href="#">Source Serif Pro</a></li>
      <li>Designer: <a href="#">Frank Grießhammer </a></li>
      <li><p>Source Serif is designed for a digital environment, the letter shapes are simplified and highly readable.</p></li>
    </ul>
  </div>
</div>
            
          
!

CSS

            
              @import url(http://fonts.googleapis.com/css?family=Source+Serif+Pro);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300);
* {
  box-sizing: border-box;
}
body {
  color: #333;
  font-family: 'Source Sans Pro', serif;
  font-weight: 300;
}

.wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -102px;
  margin-left: -270px;
  width: 520px;
  height: 204px;
}
.colophon {  
  width: 100%;
  height: 202px;
  border-top: solid 1px rgba(178, 179, 153, .25);
  border-bottom: solid 1px rgba(178, 179, 153, .25);
}

.colophon span {
  float: left;
  width: 290px;
  font-family: "Source Serif Pro";
  font-size: 130px;
  line-height: 162px;
  text-align: center;
  padding: 20px
}

.colophon ul {
  float: right;
  width: 230px;
  border-left: solid 1px rgba(178, 179, 153, .25);
  list-style: none;
  padding: 20px 0 20px 20px;
}

.colophon ul li {
  color: black;
  font-size: 15px;
  line-height: 22px;
}

.colophon ul li p {
  border-top: solid 1px rgba(178, 179, 153, .25);
  margin-top: 15px;
  padding-top: 15px;
}
    
.colophon ul li a {
  color: #BFBFA8;
  text-decoration: none;
}
            
          
!

JS

            
              $(function(){
    setTimeout(function(){
        $('.colophon span').fadeOut(300);
    },500);
    setInterval(function(){
        var c = $('.colophon span').text()[0] || "@";
         changeChar(c)   
    },2000);
});

function changeChar(b){
    var a = doNext(b == "Z" ? "@" : b);
    $('.colophon span').fadeOut(300,function(){
        $(this).text(a + a.toLowerCase()).fadeIn(300).delay(1000).fadeOut(300);   
    })
}

function doNext(a) {
    return String.fromCharCode(a.charCodeAt(0) + 1);
}

            
          
!
999px
Loading ..................