JSFiddle - React, Tailwind, and code Playground

by Rich Chatfield

HTML

<div>
    <img id="waveline" src="http://www.tankten.com/codeimages/waveline.png">
</div>


<div>
    <img id="myImg" src="http://www.tankten.com/codeimages/richtestslide2.png">
</div>
<div>
    <img id="graphoverlaylines" src="http://www.tankten.com/codeimages/graphoverlaylines.png">
</div>



<div id="baloon3"><img src="http://www.tankten.com/codeimages/richtest3.png" width="381" height="50px" /></div>
<div id="baloon2"><img src="http://www.tankten.com/codeimages/richtest2.png" width="381" height="50px" /></div>
<div id="baloon"><img src="http://www.tankten.com/codeimages/richtest.png" width="381" height="50px" /></div>

CSS

body {
background-color: #003366;
margin: 0;
}

#myImg
{
    top: 0px;
    width:0px;
    height:200px;
    position:absolute;
    left:0px;
    background-image:url('http://www.tankten.com/codeimages/richtestslide2.png'); 
    background-repeat:no-repeat;
    opacity: 0.5;
    z-index: 100;
}

#graphoverlaylines {
position:absolute;
left: 0px;
top: 0px;
z-index: 300;
}

#waveline {
top: 0px;
width:0px;
height: 200px;
position:absolute;
left: 0px;
background-image:url('http://www.tankten.com/codeimages/waveline.png'); 
background-repeat:no-repeat;
z-index: 250;

}

#baloon { width:381px; height:50px; position:absolute; left:0px; top:150px; z-index: 200;}
#baloon2 { width:381px; height:50px; position:absolute; left:0px; top:100px; z-index: 200;}
#baloon3 { width:381px; height:50px; position:absolute; left:0px; top:50px; z-index: 200;}

JavaScript

$(function(){
$(document).ready(function() {
    repeat();
    });

function repeat()
{

$("#myImg").animate({
        top: '0px',
        width: '328px',
        height: '200px'
    }, 6000,repeat);
    $("#myImg").fadeOut(1000);
    $("#myImg").animate({
        top: '0px',
        width:'0px',
        height: '200px',
    }, 0);
    $("#myImg").fadeIn(10);

}


});


$(function(){
$(document).ready(function() {
    repeat2();
    });

function repeat2()
{
$("#waveline").animate({
        top: '0px',
        width: '380px',
        height: '200px'
    }, 6000,repeat2);
    $("#myImg").fadeOut(1000);

    $("#waveline").animate({
        top: '0px',
        width:'0px',
        height: '200px',
    }, 10);
    $("#waveline").fadeIn(100);

}


});