JSFiddle - React, Tailwind, and code Playground

by darcyclarke

CSS

body {
 background: #000;
 overflow: hidden;   
}
img {
 opacity: 0;
 position: absolute;  
 -webkit-transition: opacity, left, top, width 1s linear;
}

JavaScript

var App = {};
App.cache = {},

App.rand = function(min,max){
    if(max === undefined){
        return Math.floor(Math.random()*parseFloat(min))+1;
    } else {
        return min + (Math.floor(Math.random()*(parseFloat(max)-parseFloat(min) +1)));
    }
},
App.operator = function(){ 
    return (App.rand(3) == 1) ? "+=" : "-=";
},
App.animate = function(el){
    el.css({
            opacity: Math.random(), 
            top: App.rand(App.cache.window.height())+"px",
            left: App.rand(App.cache.window.width())+"px"
        })
        .animate({
           width: App.rand(10, 200)+"px",
           "rotate": App.operator()+App.rand(360)
         }, App.rand(1500, 5000), function(){
            App.animate(el); 
        });
},
App.init = function(){
    
    App.cache.window = $(window),
    App.cache.body = $("body");
    
    for(var i=0;i<=App.rand(25,100); i++){
        $("<img src='http://darcyclarke.me/fi/resources/i/logo.svg'>")
            .css({
                width: App.rand(10,150)+"px",
                top: App.rand(App.cache.window.height())+"px",
                left: App.rand(App.cache.window.width())+"px", 
                "-webkit-transform": "rotate("+App.rand(180)+"deg)",
                "-moz-transform": "rotate("+App.rand(180)+"deg)"   
            })
            .fadeTo(App.rand(300,1000), Math.random(), function(){
                App.animate($(this));
            });
    }
    console.log(i);
};


/*****************************************************/
/*****************************************************/

(function ($) {
    // Monkey patch jQuery 1.3.1+ to add support for setting or animating CSS
    // scale and rotation independently.
    // 2009-2010 Zachary Johnson www.zachstronaut.com
    // Updated 2010.11.06
    var rotateUnits = 'deg';
    
    $.fn.rotate = function (val)
    {
        var style = $(this).css('transform') || 'none';
        
        if (typeof val == 'undefined')
        {
            if (style)
         ...