Example of terminal emulator

A-Pen-by-groteck.markdown

Terminal emulation by groteck

A Demo and play ground.

index.haml

%html
  %body
    %code
      
    %span.cursor
      |

script.js

$.fn.typer = function (text, options) {
    options = $.extend({}, {
        delay: 1000,
        duration: 1000,
        easing: 'linear',
        endless: false
    }, options);
    var elem = $(this);
    (function loop(i) {
        var e = typeof text === 'string' ? text : text[i];
        // strip html tags, might be helpful
        // e.replace(/(<.*?>)/ig,"")
        $({len: 0}).delay(options.delay).animate({len: e.length}, {
            duration: options.duration,
            easing: options.easing,
            step: function (now) {
                var pos = Math.ceil(now),
                    char = e.substr(pos, 0);
                elem.html(e.substr(0, pos));
            },
            complete: function () {
                i++;
                if (i === text.length && !options.endless) {
                    return;
                } else if (i === text.length) {
                    i = 0;
                }
                loop(i);
            }
        });
    })(0);
};

$('code').typer(["$ touch file.txt <br/> $ cat \"this is a test\" > file.txt" ]);

style.css

.cursor {
  -moz-animation: cursorAnimation 0.5s infinite; /* Firefox */
  -webkit-animation: cursorAnimation 0.5s infinite; /* Safari and Chrome */
}
 
code {
}
 
@-moz-keyframes cursorAnimation {
  0%     {opacity: 0;}
  100%   {opacity: 1;}
}
 
@-webkit-keyframes cursorAnimation {
  0%     {opacity: 0;}
  100%   {opacity: 1;}
}