Auto Animate Small Divs

buildakicker · 08-11-2009, 10:50 PM

Hi all,

I have been trying to figure out how to automatically animate a random number of divs on a page. All of the divs should just slowly float up to the top of the page... they could just float out of the screen and appear at the bottom floating up again.. whatever, that is beyond me right now...

So basically what I am thinking is...

Code:

Using Jquery Animate Function..

on page load begin to slowly move divs up page... like bubbles. 

when they reach the top they fade out and just reappear to the bottom and come to the top again in a loop...

Any thoughts on how to go about this?

buildakicker · 08-11-2009, 11:02 PM

Here's some Psudeocode

Code:

On page load
set all the divs on the bottom of the page
randomly begin to animate(float up the screen)
as they reach top, fade out and then begin at bottom of page again....
LOOP

adamdecaf · 08-12-2009, 12:20 AM

Why not just loop in every div and move the CSS absolute position up a few pixels? It may[/will] look gagged but you could decrease the amount of divs.

Salathe · 08-12-2009, 10:16 AM

Have you looked into using one of the JS frameworks for their animation abstractions? jQuery for example would make something like this only a relatively few lines of code (well, depends on how you implement it).

buildakicker · 08-12-2009, 05:17 PM

Quote:

Originally Posted by Salathe

Have you looked into using one of the JS frameworks for their animation abstractions? jQuery for example would make something like this only a relatively few lines of code (well, depends on how you implement it).

That's what I was thinking, something with JQuery. What I am struggling with is getting the animation to move through the page onload. I should do something like this right:

Code:

$(document).ready(function(){
   
function loopDiv(){
    $("#animatedDiv").show();
    $("#animatedDiv").animate({top:"100"},4000);
    $("#animatedDiv").fadeTo("slow",0);
  });

//don't know much about this yet...
jquery.each() //say I have 20 items, loop through the items, create div, animate.

});

buildakicker · 08-13-2009, 08:20 PM

Using a Timeout, I've got this working perty good with JQuery inside the function...

Code:

function addElement()
{
       var tx = 'Here you go!';
	var i=0;
	for(i=0; i<1; i++){
  		newDiv = document.createElement("div");
		newDiv.className = "num" + i;
		newDiv.id="animatedDiv";
	 	newDiv.innerHTML = "<div class='tweets'>"+ tx + "</div>";

  		// add the newly created element and it's content into the DOM
	  	my_div = document.getElementById("page");
  		document.body.insertBefore(newDiv, my_div);
	
		$(document).ready(function(){	
			$(".num0").fadeTo("slow",1);
			$(".num0").animate({top:"-140"},2000);
			$(".num0").fadeTo("slow",0);			
		}); 
  	}
	t=setTimeout("addElement()",1000);
}