Matrix Code v1.1

by marakoss

HTML

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

body {
    background-color: #000000;
    overflow: hidden;
}

JavaScript

var interval = null;
var timeout = null;

var colors = ['#00ee00', '#00dd00', '#00cc00', '#00bb00', '#00aa00', '#006600', '#007700', '#008800', '#009900', '#00ff00'];

var chars = ['カ', 'き', 'モ', 'ガ', 'ヂ', 'ホ', 'ヨ', 'ネ', 'コ', 'ル', 'ム', 'ま', 'ぎ', 'れ', 'め', 'せ', 'け', 'さ', 'た'];

var speeds = [3000, 4000, 5000, 6000, 7000];

var elements = $('body *');

var window_height = $(window).height();
var window_width = $(window).width() - 30;

function reset(element) {
    var size = 5+Math.floor(Math.random() * 50);
    var pos_x = Math.floor(Math.random() * window_width);
    var pos_y = -350 - Math.floor(Math.random() * 600);
    element.css({
        "opacity": (((Math.round(Math.random() * 100) % 4) + 6) / 10),
        "left": pos_x + "px",
        "top": pos_y + "px",
        "color": colors[Math.floor(Math.random() * 10)],
        "width": size - (size / 1.5) + "px",
        "height": 300 + "px",
        "display": "block",
        "position": "absolute",
        "font-size": size - (size / 2) + "px"
    }).html(function() {
        var result = '';
        for (var i=0;i<=11;i++) {
           result = result + chars[(Math.round(Math.random() * 100) % 19)]+" ";
        }
        return result;
    }).stop();

    animation(element);
}

function animation(element) {
    element.animate({
        "top": window_height + 20 + "px",
    }, {
        "duration": speeds[(Math.round(Math.random() * 100) % 5)],
        "easing": "linear"
    });

}

function isVisible(element) {
    var pos = element.position();
    if (pos.top <= window_height) {
        return true;
    }
    return false;
}

function action(element) {

    if (isVisible(element) == false) {
        reset(element);
    }
}


function runner() {
    var count_lead = 50;
    elements.each(function() {
        if (count_lead > 0) {
            
            $(this).html(function(index, oldhtml) {
                var result = oldhtml.substring(0,oldhtml.length-1);
                result = result +...