How to make a matrix like letter fall down animation in jquery -

i want make animation in jquery letters fall top , fade out @ bottom. not getting how it.can u tell me how use jquery animation it.thanks in advance.

try this:

(function(caption) {      var stepx, stepy,      //screen grid width , height      width, height,       doc,       //message show      message, messagelength, currentchar, getchar,      messageleft, messageright, messagetop,      //animation settings      falltime, delay, makedelay,            animationend, animationstart,            ismessage = function(position) {              return position >= messageleft && position < messageright;      };        //create initials      var init = function() {          var docel, math = math, prefix = " |-moz-|-o-|-webkit-".split("|");          doc = document;          docel = doc.documentelement;          stepx = 10;          stepy = 18;          width = math.floor(docel.clientwidth / stepx);          height = math.ceil(docel.clientheight / stepy);          message = caption.touppercase();          messagelength = message.length;          messageleft = math.floor((width - messagelength)/2);          messageright = messageleft + messagelength;          messagetop = math.floor(height/2);          currentchar = 0;          getchar = function() {              return message.charat(currentchar++%messagelength);          };                    falltime = 1.4; //total fall time approx twice animation-duration          delay = math.round(falltime/height*100)/100; //animation delay between 2 adjacent letters                    makedelay = function(position) {              var time = position * delay + "s", buf = [];                            prefix.foreach(function(item) {                  buf.push(item, "animation-delay:", time, ";"); //join browser-specific props              });                            return buf.join("");                        };                    //bad-bad-bad. use modernizr instead of browser sniffing;          var ua = window.navigator.useragent;          if(ua.indexof("msie") > -1){              animationend = "msanimationend";              animationstart = "msanimationstart";          }          else if(ua.indexof("opera") > -1) {              animationend = "oanimationend";              animationstart = "oanimationstart";          }          else if(ua.indexof("webkit") > -1) {              animationend = "webkitanimationend";              animationstart = "webkitanimationstart";          }           else { //ff , w3c              animationend = "animationend";              animationstart = "animationstart";          }                  };        //column constructor      var column = function(options) {              this.position = options.position;              this.id = "column" + this.position;              this.ondestroy = options.ondestroy;              this.onstart = options.onstart;              this.onstop = options.onstop;          },           columnproto = column.prototype;                /**       * render entire element content;       */      columnproto.render = function(){          var body = document.body,              buf = [], = 0, len = height,               me = this, id = me.id;                        buf.push('<div class="column" id="', id, '" style="left:', me.position * stepx ,'px">');                    for(; < len; i++) {              buf.push('<div class="cell" style="', makedelay(i), '">', me.getchar(i), '</div>');          }                    buf.push('</div>');                    //append body          body.insertadjacenthtml('beforeend', buf.join(""));                    //save current element          me.element = doc.getelementbyid(id);          me.element.lastelementchild.addeventlistener(animationend, me.stop.bind(me), false);      };            /**       * symbol position       */      columnproto.getchar = function(i) {          return string.fromcharcode(65 + math.floor(math.random()*21 + 1));      };            /**       * starts animation       */      columnproto.start = function() {                          this.element.classname += ' animated';          this.isanimated = true;          var stub = this.onstart && this.onstart(this);      };            /**       * stops animation       */      columnproto.stop = function() {          var element = this.element,              classname = element.classname;                            element.classname = classname.replace(/\banimated\b/, '');                    this.isanimated = false;          var stub = this.onstop && this.onstop(this);      };            /**       * remove column dom;       */      columnproto.destroy = function() {          var me = this,              element = me.element,              ondestroy = me.ondestroy;          element.parentnode.removechild(element);          //call destroy callback          var stub = ondestroy && ondestroy(me);                            element = me.element = me.ondestroy = null;      };            /**       * special message column       *        */      var messagecolumn = function(options) {          column.call(this, options);      }, messagecolumnproto;            //inherit messagecolumn column      (function(){          var f = function(){};          f.prototype = column.prototype;          messagecolumn.prototype = messagecolumnproto = new f();          messagecolumn.prototype.constructor = messagecolumn;      }());            messagecolumnproto.render = function(){          var buf = [];          columnproto.render.apply(this, arguments);                    buf.push('<div class="message" style="top:', messagetop*stepy, 'px; left:', this.position*stepx, 'px;" id="message', this.position ,'">', this.getchar(messagetop), '</div>');                    this.element.insertadjacenthtml('afterend', buf.join(""));          this.message = doc.getelementbyid("message"+ this.position);          this.element.children[messagetop].addeventlistener(animationstart, this.showmessage.bind(this), false);      };            messagecolumnproto.showmessage = function(){          if(this.isshown) {return;}          this.isshown = true;          this.message.classname += " shown";      };            /**       * return message part message row       */      messagecolumnproto.getchar = function(i) {          return === messagetop ? message.charat(this.position - messageleft) : columnproto.getchar.apply(this, arguments);      };                                  init();      var columns = {}, running = {}, messagecolumnsorder = [], columnsorder = [];      (function() {          var i, len, column,           markasrunning = function(column) {              running[column.position] = 1;          },           markasnonrunning = function(column) {              delete running[column.position];          },          createcolumn = function(position) {              if (ismessage(position)) {                  messagecolumnsorder.push(i);                  return new messagecolumn({position: i, onstart: markasrunning, onstop: markasnonrunning });              }               else {                  columnsorder.push(i);                  return new column({position: i, onstart: markasrunning, onstop: markasnonrunning });              }                          }, randomizer = function() {              return 0.5 - math.random();          };          for(i = 0, len = width; < len; i++) {              column = createcolumn(i);              columns[i] = column;              column.render();          }                    //randomize message columns          messagecolumnsorder.sort(randomizer).sort(randomizer);                    //randomize simple columns          for(i = 0 ; < 5; i++) {              columnsorder = columnsorder.concat(columnsorder);          }          columnsorder.sort(randomizer).sort(randomizer);                          }());            var currentstep = 1,  		//select column animate          selectcolumn = function() {  			//messagecolumn every 5 steps;              return currentstep%5 === 0 ? messagecolumnsorder.pop() : columnsorder.pop();          },  		stopanimation = function() {  			clearinterval(timer);  		},  		startanimation = function(){              var index, column;                            index = selectcolumn();    			//no column found.               if(index === undefined) {stopanimation(); return;}                            currentstep++;              column = columns[index];              var stub = column && column.start();                		},          timer = setinterval(startanimation, 100);  }("merry christmas"));

@keyframes colored  {      0% {color: #fff;}      50% {color: #0f0;}      100% {color: #000;}      }    @-moz-keyframes colored  {      0% {color: #fff;}      50% {color: #0f0;}      100% {color: #000;}      }    @-o-keyframes colored  {      0% {color: #fff;}      50% {color: #0f0;}      100% {color: #000;}      }    @-webkit-keyframes colored  {      0% {color: #fff;}      50% {color: #0f0;}      100% {color: #000;}      }    .animated {        }    body {      margin: 0;      border: 0;      padding: 0;      background-color: #000;      color: #000;      font-size: 1em;      font-family: consolas, monospace;      overflow: hidden;  }    .column {      position: fixed;      width: 10px;      height: 100%;      oveflow: visible;  }    .cell {      width: 10px;      height: 18px;  }    .animated > .cell {  	animation-name: colored;      animation-duration: 1s;      animation-timing-function: linear;        -moz-animation-name: colored;      -moz-animation-duration: 1s;      -moz-animation-timing-function: linear;            -o-animation-name: colored;      -o-animation-duration: 1s;      -o-animation-timing-function: linear;            -webkit-animation-name: colored;      -webkit-animation-duration: 0.7s;      -webkit-animation-timing-function: linear;  }    .message {  	position: fixed;  	z-index: 10;  }    .shown {  	color: #fff;      background-color: #000;  }

<!doctype html>  <html>  <head>  <meta charset=utf-8 />  <title>js bin</title>  </head>  <body>      </body>  </html>