Question

I’m new here and new to JavaScript too.

Basically what I’m trying to achieve is making a image rise from the footer to the center of the page, I’ve worked out how to do it with CSS. But I wanted it to rise up, when the page loads by itself.

If anyone could point me in the right direction or show me some examples etc. I’d be very grateful.

Thanks in advance,

Joe

Answer 1

So you want to perform an animation before/while a page is being loaded?
Most modern browsers load the website before animating anything.

There is an alternative though. You can leave most of the content out of the page, except for the animation of course. When the website is loaded, animation starts and you can use AJAX to get your content.

That would mean that while your animation is running, content is loaded.

I’m creating a demo right now… hold on!

---

Here’s the demo: http://jsfiddle.net/gWhtQ/

I’ve used window.addEventListener('load', init, false); to wait for the javascript to run untill the page is loaded.

After it’s loaded, an XMLHttpRequest object is created which get’s an other file while your page runs normally.

Once content is loaded, I add the response using document.getElementById('content').innerHTML = xmlhttp.responseText;.

Dont mention the content. I just used a random CSS file available.