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 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:20%;
    padding:0;
    margin:0;
}
.holder {
    position: absolute;
    margin:0;
    padding:0;
}

JavaScript

function generate(data) {
    var links = [];

    for (var i = 0; i < data.response.length; i++) {

        var link = data.response[i].photos[0].original_size.url;
        links.push(link);
    }
    var i = 0;
    $('#head').children('.holder').each(function () {

        var random = Math.round(Math.random() * 30);
        var size = Math.round(Math.random() * 50);
        var opacity = Math.random() * 0.9;
        var saturation = (Math.random() * 5) + 10;
        var hue = (Math.random() * 50) + 100;
        var rotate = 180;



        $(this).css({

            background: "url('" + links[random] + "')",
                'background-size': size + "%",

            opacity: opacity,
                '-webkit-filter': "saturate(" + saturation + ")" + "hue-rotate(" + hue + "deg)",
                '-webkit-transform': 'scale(-1, 1)',
            width: '100%',
            height: '100%',


        });
        if(i>1){
            $(this).css({
                '-webkit-transform': "rotate(" + rotate + "deg)"
            });
        }
        
    i+=1;
    });
}

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