Animated text

by leongaban

HTML

<body>
    <div class="container">

    <h3 class="flying-text active-text"></h3>

    <span>text synchronization comes</span>
    </div>

</body>

CSS

body{

    background-color:#ccc;

    }

    .container{

    background-color:#fff;

    width:500px;

    margin:0 auto;

    color:#000;

    overflow:hidden;
    
    height:400px;
    
  -webkit-border-radius: 12px; 
     -moz-border-radius: 12px; 
          border-radius: 12px; 
          
          
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 

  -webkit-box-shadow: 0px 0px 4px #ffffff; 
     -moz-box-shadow: 0px 0px 4px #ffffff; 
          box-shadow: 0px 0px 4px #ffffff; 

    }
    
    .container span
    {
      position:absolute;
      background:green;
      top:40%;
      width:500px;
      height:110px;
      text-indent:-5000px;
      z-index:10;
      left:-700px;
    
    }

    .flying-text{
          left:-100px;
          top:40%;
          position:absolute;
          z-index:9999;
          font-size:32px;
          font-family:vivaldi;

    }

JavaScript

$(document).ready(function(){
    $('.container .flying-text').css({opacity:0});

    $('.container span').animate({opacity:0.7, left: '2%'}, 4000, function() { $('.container .active-text').animate({opacity:1, left: '2%'}, 100, function() { type();}
    )});
        var char1 = 0;
    var caption = "the text synchronization comes";
    
    function type() {

        $('.active-text').html(caption.substr(0, char1++));

        if(char1 < caption.length+1)
            setTimeout(function(){
                type()
            },70);
        else {
            char1 = 0;
            $('.active-text').fadeOut().fadeIn('slow').css({'text-decoration':'underline'});
        }

    }

    });