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>

Reply via email to