JSFiddle - React, Tailwind, and code Playground

by jepperask

HTML

<div id="container">

</div>
<div id="animation">
    
</div>
<div id="item1">
    
</div>
<div id="item2">
    
</div>
<div id="item3">
    
</div>

CSS

body, html {
    padding: 0;
    margin: 0;
    background-color: rgba(0,0,0,1);
}
#container {
    width: 100%;
    height: 85px;
    position: absolute;
    background-image: url("http://www.tasktraders.dk/images/logo.png");
    margin: 0;
}

#animation {
    height: 85px;
    width: 100%;
    z-index: 1;
}

#item1 {
    height: 85px;
    top: 0;
    left: 0%;
    background-color: rgba(255,0,0,1);
    position: absolute;
}

#item2 {
    height: 85px;
    width: 89%;
    top: 0;
    right: 0%;
    background-color: rgba(0,255,0,1);
    position: absolute;   
}

#item3 {
    height: 85px;
    width: 20%;
    top: 0;
    left: 0%;
    background-color: rgba(0,0,255,0.5);
    position: absolute;   
}

JavaScript

for (y = 0; y < 100; y++) {
   for (i = 0; i < 120; i++) {
        $( "#item1" ).animate(
        {
            width: i -20 + "%",
        }, 10);
        $( "#item2" ).animate(
        {
            width: 99 - i + "%",
        }, 10);
        $( "#item3" ).animate(
        {
            left: -20 + i + "%"
        }, 10);
    }
}