JSFiddle - React, Tailwind, and code Playground

by jaubourg

HTML

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

CSS

body {
    overflow: hidden;
}

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

JavaScript

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

for ( ; i < 80; i++ ) {
    divsCode[ i ] = "<div>" + msg[ i % msg.length ] + "</div>";
}
divsCode = divsCode.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 }
        ],
        $divs = $( divsCode ).each(function( i ) {
                $(this).css( startingPosition[ i % startingPosition.length ] );
            }).appendTo( "body" ),
        dh = $divs.outerHeight(),
        dw = $divs.outerHeight(),
        moves = [
            function( pos ) {
                pos.left -= dw;
            },
            function( pos ) {
                pos.left += dw;
            },
            function( pos ) {
                pos.top -= dh;
            },
            function( pos ) {
                pos.top += dh;
            }
        ];

            
    (function again( odd, msgIndex ) {
        
        winh = $window.height();
        winw = $window.width();

        var h = Math.floor( ( winh - dh ) / dh ) || 1,
            w = Math.floor( ( winw - dw ) / dw ) || 1;
        
        function testPos( pos ) {
            return pos && pos.top >= 0 && ( pos.top + dh ) <= winh
                 && pos.left >= 0 && ( pos.left + dw ) <= winw;
        }
        
        $.when( 
            
            // Get new text
            $.ajax({
                url: '/echo/html/',
                type: 'POST',
                data: { html: msg[ msgIndex ] }
            }),
            
            // Animate half the elements
            $divs.filter(function(index) {
                var animated = ( ( index % 2 ) === ( odd ? 1 : 0 ) );
                $( this ).css( "zIndex", animated ? 30 : 20 );
               ...