JSFiddle - React, Tailwind, and code Playground

by jaubourg

HTML

<script src="http://dl.dropbox.com/u/17147445/jquery.min.js"></script>

CSS

button {
    position:absolute;
    z-index: 9001;
}
ul { list-style: none; }
li { display:block;
     border:2px solid #F0F;
     background: #FFF;
     width:50px;
     height:50px;
     position:absolute;
     line-height:50px;
     text-align:center;
     color: #000;
}
li.jaubourg {
    background: #000;
    color: #FFF;
}
li.eric {
    border: 3px solid #000;   
}

JavaScript

var msg = [ 'jQuery', '$.when', 'ANIM', 'SYNC', 'DEMO' ],
    lisCode = [],
    i = 0;

for ( ; i < 80; i++ ) {
    lisCode[ i ] = "<li>" + msg[ i % msg.length ] + "</li>";
}
lisCode = lisCode.join( "" );

function go() {
    var $window = $( window ),
        winh = $window.height(),
        winw = $window.width(),
        startingPosition = [
            { top: -100, left: -100 },
            { top: -100, left: winw + 100 },
            { top: winh + 100, left: winw + 100 },
            { top: winh + 100, left: -100 }
        ],
        $lis = $( lisCode ).each(function( i ) {
                $(this).css( startingPosition[ i % startingPosition.length ] );
            }).appendTo( $( "<ul/>" ).appendTo( "body" ) );
    
    (function again( odd, msgIndex ) {
        
        winh = $window.height();
        winw = $window.width();

        var lh = $lis.height() + 4,
            lw = $lis.width() + 4,
            h = Math.floor( ( winh - lh ) / lh ) || 1,
            w = Math.floor( ( winw -lw ) / lw ) || 1;
        
        $.when( 
            
            // Get new text
            $.ajax({
                url: '/echo/html/',
                type: 'POST',
                data: { html: msg[ msgIndex ] }
            }),
            
            // Animate half the elements
            $lis.filter(function(index) {
                var animated = ( ( index % 2 ) === ( odd ? 1 : 0 ) );
                $( this ).css( "zIndex", animated ? 30 : 20 );
                return animated;
            }).each(function() {
                $( this ).animate({
                        top: Math.round( Math.random() * h ) * lh + ( winh % lh ) / 2,
                        left: Math.round( Math.random() * w ) * lw + ( winw % lw ) / 2
                    },
                    {
                        duration: Math.random() * 500 + 500,
                        complete: function() {
                            $( this ).toggleClass( 'eric' );
                        }
         ...