JSFiddle - React, Tailwind, and code Playground

by sandro_paganotti

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
<script src="https://raw.github.com/LeaVerou/prefixfree/master/prefixfree.min.js"></script>
<!doctype html>
<html>
    <head>
    </head>
    <body>
        <section id="tweetwall">
          
        </section>
    </body>
</html>

CSS

body{
    transform-style: preserves-3d;
    perspective: 200px; 
    height: 100%;
}

#tweetwall{
    margin: 0px auto;
    transform-style: preserves-3d;
    perspective: 200px; 
    position: relative;
    /*transform: translate3d(0,0,0)  rotateX(10deg) ;*/
}

.tweet{
    position: absolute;
    margin: 0px;
    transform-style: preserves-3d;
    transition-property: transform, top, left, width, height;
    transition-duration: 2s;
    transition-timing-function: ease-out;
}

.tweet.selected{
    width: 500px !important;
    height: 500px !important;       
    /*transform: translate3d(0,0,30px) rotateX(-10deg);*/      
}

JavaScript

jQuery.jQueryRandom = 0;
jQuery.extend(jQuery.expr[":"],
{
    random: function(a, i, m, r) {
        if (i == 0) {
            jQuery.jQueryRandom = Math.floor(Math.random() * r.length);
        };
        return i == jQuery.jQueryRandom;
    }
});

var dwidth = $(window).width() - 10;
var dheight = $(window).height();
var xtiles = 15;
var ytiles = 10;
var tile_w = Math.round(dwidth/xtiles);
var tile_h = Math.round(dheight/ytiles);

$('#tweetwall').css({
    'width'  : '' + tile_w * xtiles + 'px',
    'height' : '' + tile_h * ytiles + 'px',
});

styletag = document.createElement('style');
styletag.textContent = ".tweet.selected{ top:"+ Math.round(tile_h * (ytiles/2) - 200) +"px !important; left:"+ Math.round(tile_w * (xtiles/2) - 250) +"px !important; }";
$(styletag).appendTo('head');

for(var row=0; row < ytiles; row++){
    for(var i=0; i< xtiles; i++){
        var imgtag = $("<div class='tweet'></div>");
        imgtag.css({
          'width' : '' + tile_w + 'px',
          'height': '' + tile_h + 'px',
          'top'   : '' + row * tile_h + "px",
          'left'  : '' + i * tile_w + "px",  
          'background' : 'black',  
          'background-image' : "url('http://s1-01.twitpicproxy.com/photos/large/440989453.jpg')",
          'background-size'  : "contain",
          'background-repeat' : "no-repeat", 
          'background-position' : 'center center' 
        });
        imgtag.appendTo('#tweetwall');
    }
}

function ease_image(){
    var random_tweet = $('.tweet:random');
    $('.tweet').css("z-index","0");
    random_tweet.css("z-index","9999");
    random_tweet.addClass('selected');
    setTimeout(function(){
        random_tweet.removeClass('selected');    
    }, 5000);
}

setInterval(ease_image, 12000);
setTimeout(ease_image,1000);