A Pen by hakanersu.

Flying-Letters.markdown

Flying Letters

Change name variable and let it fly.

A Pen by hakanersu on CodePen.

License.

index.html

<div class="tasiyici">
  
</div>

script.js

var name     ="Hakan ERSU",
    nameArr  =name.split(''),
    arrayLength=nameArr.length,
    containerWidth=$('.tasiyici').width(),
    fontSizeMax=64,
    containerHeight=$('.tasiyici').height();
    function getRandomInt (min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

function revealMe(){

  var numberOfRealMe = $('.realme').length;
  $("<span>",{
    'class':'realme harf'
  }).appendTo('.tasiyici').html(nameArr[0]).css({
    left:numberOfRealMe*60,
    'font-size':64
  }).animate({
    bottom:200
  },function(){
    //nameArr.remove(nameArr[0]);
    nameArr.shift();
  });
}
function randomLetters(){
	console.log('started');
   $.each(nameArr,function(key,value){
  $("<span>", {
    'class':'harf'
  }).appendTo('.tasiyici').html(value).css({
    left:getRandomInt(0,containerWidth),
    fontSize:getRandomInt(12,fontSizeMax)
  }).animate({
    bottom:getRandomInt(600,containerHeight)
  },getRandomInt(600,1600),function(){
    $(this).animate({
      opacity:0
    },100,function(){ $(this).remove();});
  });
});
}

 setInterval(function(){
	randomLetters();
},600);

setInterval(function(){
	revealMe();
},3000);

style.css

.tasiyici {
  width:600px;
  height:400px;
  display:block;
  position:relative;
  overflow:hidden;
}
.harf{
  position:absolute;
  bottom:-40px;
  left:0;
  color:#666;
  font-family: Arial;
  
}