JSFiddle - React, Tailwind, and code Playground

by Ehsan Ziya

HTML

<div id='head'>
    <div class='holder'></div>
    <div class='holder'></div>
    <div class='holder'></div>
    <div class='holder'></div>
    <div class='holder'></div>

</div>

CSS

html {
    width:100%;
    height:100%;
}

body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    
}

#head{
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    
    
}
.holder{
    position: absolute;
    
    -webkit-filter: saturation(10) greyscale(100%);
    margin:0;
    padding:0;
    
}

JavaScript

function test(data) {
    var links = [];
    
    for (var i = 0; i < data.response.length; i++) {
        //.console.log(data.response[i].photos[0]);
        var link = data.response[i].photos[0].alt_sizes[1].url;
        links.push(link);    
    }
    
    
    $('#head').children('.holder').each(function(){
        
        var random = Math.round(Math.random() * 10);
        var size = (Math.random() * 20);
        var invert_random = Math.random();
        var opacity_random = Math.random();
        
        if(opacity_random > 0.3){
            opacity_random = 0.3;
        }
         
           console.log(opacity_random);
        $(this).css({
            
            background : "url('" + links[random] + "')",
            'background-size': size+"100%",
            width: '100%',
            height: '100%',
            opacity: opacity_random,
            'webit-filter' : 'greyscale(100%)'
            
        });
        
        if(invert_random > 0.5){
            console.log('invert');
            $(this).css({
                '-webkit-filter' : 'invert(100%) greyscale(100%)'
            });
        }
        
        
       
    });
    
    
    
                
                
    
}

$.ajax({
    url: 'http://api.tumblr.com/v2/tagged?tag=gif&api_key=cIBh1bpFkHI2pyWmGDV3YPOlErsRgNCtsJ715Pl09uMKEY2kOK&limit=10',
    success: test,
    dataType: 'jsonp'
});