JSFiddle - React, Tailwind, and code Playground
HTML
<div id="intro">
<div id="content">
<div class="box info">
<a href="page1.php" class="pagelink"><span class="hide">Page1</span></a>
</div>
<div class="box home">
<a href="page2.php" class="pagelink"><span class="hide">Page2</span></a>
</div>
<div class="box aboutus">
<a href="page3.php" class="pagelink"><span class="hide">Page3</span></a>
</div>
<div class="box gallery">
<a href="page4.php" class="pagelink"><span class="hide">Page4</span></a>
</div>
<div class="box reference">
<a href="page5.php" class="pagelink"><span class="hide">Page5</span></a>
</div>
<div class="box colours">
<a href="page6.php" class="pagelink"><span class="hide">Page6</span></a>
</div>
</div><!--#content-->
</div><!--#intro-->
CSS
#intro {
}
#intro #content {
width: auto;
margin-top: 0;
position: relative;
height: 80px;
width: 120px;
margin: 200px;
background: #f1f1f1;
border: 1px solid #f1f1f1
}
.box {
width: 40px;
float: left;
background-position: 0 0;
overflow: hidden;
position: relative;
background: #adbdd0
}
#intro .box {
height: 40px;
position: absolute;
border: 1px solid #fff
}
#intro .box a {
color: #f1f1f1;
font: normal 10px Arial;
display: block;
text-decoration: none;
line-height: 40px;
text-align: center
}
#intro .box.info {
top: 0;
left: 0
}
#intro .box.home {
top: 0;
left: 40px
}
#intro .box.aboutus {
top: 0;
left: 80px
}
#intro .box.gallery {
top: 40px;
left: 0
}
#intro .box.reference {
top: 40px;
left: 40px
}
#intro .box.colours {
top: 40px;
left: 80px
}
JavaScript
$(document).ready(function(){
var h = $(window).height();
var w = $(window).width();
$('#intro .box').each(function(){
var originalOffset = $(this).position(),
$this = $(this),
tLeft = w-Math.floor(Math.random()*900),
tTop = h-Math.floor(Math.random()*900);
$(this).css({
"left": tLeft,
"top": tTop
});
$this.animate({ "left": originalOffset.left,
"top": originalOffset.top
},5000);
});
});