JSFiddle - React, Tailwind, and code Playground

by jaubourg

HTML

<script src="http://dl.dropbox.com/u/17147445/jquery.min.js"></script>
<script src="http://dl.dropbox.com/u/17147445/jquery.color.min.js"></script>
<script src="http://dl.dropbox.com/u/17147445/jquery.css.rotate.js"></script>
<span id="number"></span>

CSS

body {
    overflow: hidden;
}

span#number {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    color: white;
    background: black;
    height: 18px;
    font-weight: bold;
    font-size: 10px;
    font-family: Tahoma;
    font-variant: small-caps;
    padding: 4px;
    z-index: 100;
}

div { 
     display:block;
     border:0.3em solid transparent;
     background: #FFF;
     margin: 0.15em;
     width:3.5em;
     height:3.5em;
     line-height: 3.5em;
     position:absolute;
     text-align:center;
     color: #FFF;
     -webkit-border-radius: 3.5em;
     -moz-border-radius: 3.5em;
     border-radius: 3.5em;
    -moz-box-shadow: 0.2em 0.2em 0.3em #000;
    -webkit-box-shadow: 0.2em 0.2em 0.3em #000;
    box-shadow: 0.2em 0.2em 0.3em #000;
}

JavaScript

var msg = [ 'KWZY', 'ball', 'move', '!?...', 'eat', 'bacon', 'ZOMG' ],
    colors = [ 'olive', '#191970', '#4B0082', '#2F4F4F' ];

function getNewBalls( number, startingPosition ) {
    if ( number < 0 ) return;
    var divsCode = [],
        i = 0;
    for ( ; i < number; i++ ) {
        divsCode[ i ] = "<div>" + msg[ i % msg.length ] + "</div>";
    }
    return $( divsCode.join( "" ) ).each(function( i ) {
        $(this).css( startingPosition[ i % startingPosition.length ] );
    }).appendTo( "body" );
}

function scaleScreen( winw, winh ) {
    $( "body" ).css( "fontSize", ( ( winw + winh ) / 2 * 100 / 676 ) + "%" );
    
}

function go() {
    var $window = $( window ),
        winh = $window.height(),
        winw = $window.width(),
        body = $( "body" )[ 0 ],
        $number = $( "#number" ),
        startingPosition = [
            { top: -100, left: -100 },
            { top: -100, left: winw + 100 },
            { top: winh + 100, left: winw + 100 },
            { top: winh + 100, left: -100 }
        ],
        $divs = getNewBalls( 80, startingPosition );
    
    setInterval( function() {
        getNewBalls( 40 - $divs.length + Math.floor(Math.random()*30),  startingPosition );
    }, 10000 );

            
    (function again( odd, msgIndex ) {
        
        $divs = $( "div" );
        
        $number.text( "Crazy Balls: " + $divs.length );
        
        winh = $window.height();
        winw = $window.width();
        
        scaleScreen( winw, winh );

        var dh = $divs.outerHeight(),
            dw = $divs.outerHeight(),
            h = Math.floor( ( winh - dh ) / dh ) || 1,
            w = Math.floor( ( winw - dw ) / dw ) || 1;
            moves = [
                function( pos ) {
                    pos.left -= dw;
                },
                function( pos ) {
                    pos.left += dw;
                },
                function( pos ) {
                    pos.top -= dh;
                },
               ...