JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<img class="selectDisable" src="http://img835.imageshack.us/img835/9130/72field1.jpg" id="bg" />
<div class="selectDisable" id="content">
<div id="title">NATIONAL BALLOON FESTIVAL</div>
</div>
<img id="friends" class="selectDisable" src="http://img823.imageshack.us/img823/7296/13balloon2.png" width=15% />
<div id="top" style="z-index:5"></div>
CSS
html, body {
height: 100%;
padding: 0;
overflow: hidden;
}
html {
margin: 0;
}
img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#content {
position:absolute;
z-index:4;
top:0px;
left:0px;
}
div#top {
position:absolute;
z-index=5;
top:0px;
left:0px;
width:100%;
height:100%;
}
.selectDisable {-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; }
div#title {
z-index:3;
width:100%;
font-size:250%;
color: #FCD116;
text-shadow: 0px 2px 3px #555;
}
#friends {
position: absolute;
z-index:3;
left:90%;
top:10%;
}
JavaScript
function moveit() {
var newTop = Math.floor(Math.random()*150);
var newLeft = Math.floor(Math.random()*1024);
var newDuration = 9000
$('#friends').animate({
top: newTop,
left: newLeft,
width: "+="+(newTop),
}, newDuration, function() {
moveit();
});
}
$(document).ready(function() {
moveit();
});