[jQuery] Start Animation from Center of Screen
I have some animated text using the top and left css properties. But,
everything starts from the top left of my screen. How could I make
the animation start from the center, and then float out from there?
Example Page:
http://www.puc.edu/media/reasons/who-is-god
jQuery Code:
<script type="text/javascript">
$(document).ready(function(){
// Start floater function
var floater = function()
{
$('.floater').each(function() {
// Random Times
var timeout = Array();
timeout[0] = 4000;
timeout[1] = 5000;
timeout[2] = 10000;
timeout[3] = 15000;
timeout[4] = 20000;
timeout[5] = 25000;
timeout[6] = 30000;
var time = timeout[Math.floor(Math.random() * timeout.length)];
$(this).animate({
'marginTop':(Math.random() * $(window).height()) + 'px',
'marginLeft':(Math.random() * $(window).width()) + 'px'
},
time,'swing',function(){
setTimeout(floater,10);
});// End animate
});// End each
}// End floater
// Execute our function
floater();
// Stop animation when button is clicked
$('.floater').mouseover(function(){
$(this).stop();
$(this).children('p').fadeIn('slow');
});
$('.floater').mouseout(function(){
//floater();
});
// Add our colors
$('.floater').each(function()
{
// Create array of colors
var colors = Array();
colors[0] = '#66ff44';
colors[1] = '#9900ff';
colors[2] = '#ff11ff';
colors[3] = '#ff2266';
colors[4] = '#ff7755';
colors[5] = '#ffbb55';
colors[6] = '#eeff33';
// Random hex value
var color_hex = colors[Math.floor(Math.random() * colors.length)];
$(this).css('color', color_hex);
});// End each
});// End ready
</script>