JSFiddle - React, Tailwind, and code Playground

by mkurzweil

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
 <div id="container">
  <div id="ball"></div>
  <div id="shadow"></div>
 </div>

CSS

#container {
    width:400px;
    height:400px;
    margin:auto;
    position: relative;
    background-color: #F5F5F5;
    margin-top:40px;
    border:1px solid #CCC;
}
 
#ball {
    border-radius: 50%;
    background-color: #AAA;
    position:absolute;
    left:50%;   
    z-index:2;
    display:none;
    border:1px solid #999;
 
    /*------------- GRADIENT GENERATED FROM http://www.colorzilla.com/gradient-editor/ ----------------------- */
    background: rgb(234,234,234); /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(234,234,234,1) 1%, rgba(112,112,112,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(1%,rgba(234,234,234,1)), color-stop(100%,rgba(112,112,112,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, rgba(234,234,234,1) 1%,rgba(112,112,112,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, rgba(234,234,234,1) 1%,rgba(112,112,112,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, rgba(234,234,234,1) 1%,rgba(112,112,112,1) 100%); /* IE10+ */
    background: linear-gradient(135deg, rgba(234,234,234,1) 1%,rgba(112,112,112,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#707070',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
 
#shadow {
    border-radius: 50%;
    background-color: #CCC;
    position:absolute;
    bottom:10px;
    left:50%;
    z-index:1;
    display:none;
}

JavaScript

var bouncetime = 1000;
    var ballheight = 280;
    var ballsize = 80;
 
    $('#ball').css({'width':ballsize, 'height':ballsize, 'margin-left':-(ballsize/2),'display':'block', 'bottom':ballheight});
    $('#shadow').css({'width':ballsize*1.5, 'height':ballsize/3, 'margin-left':-(ballsize*0.75),'display':'block', 'opacity':0.2});
 
    ballbounce();
    ballshadow();
 
    function ballbounce() {
        $('#ball').animate({'bottom':20}, bouncetime, 'easeInQuad', function() {
            $('#ball').animate({'bottom':ballheight}, bouncetime, 'easeOutQuad', function() {
                ballbounce();
            });
        });
    }
    function ballshadow() {
        $('#shadow').animate({'width':ballsize, 'height':ballsize/4, 'margin-left':-(ballsize/2), 'opacity':1}, bouncetime, 'easeInQuad', function() {
            $('#shadow').animate({'width':ballsize*1.5, 'height':ballsize/3, 'margin-left':-(ballsize*0.75), 'opacity':0.2}, bouncetime, 'easeOutQuad', function() {
                ballshadow();
            });
        });
    }